How to load and validate form data using jQuery EasyUI ?
Last Updated :
23 Jul, 2024
EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and, Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
Download all the required pre-compiled files from the official website and save it in your working folder. Please take care of proper file paths during code implementation.
Official website for jQuery EasyUI:
https://www.jeasyui.com/index.php
Example 1: The following code demonstrates the design of the basic user form using jQuery EasyUI framework.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="demo.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
</head>
<body>
<h2>jQuery EasyUI basic user form</h2>
<div class="easyui-panel"
style="width:100%;max-width:400px;padding:30px 60px;">
<form id="formID" method="post">
<!-- Set class to form-floating-label for
special labels-->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!-- easyui-textbox class is used -->
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true,
labelPosition:'top'">
</div>
<!-- set the data-options for HTML validation -->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox"
name="email" style="width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--set multiline to true for textarea-->
<input class="easyui-textbox"
name="message"
style="width:100%;height:60px"
data-options="label:'Message:',
multiline:true,
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<select class="easyui-combobox"
name="language" style="width:100%"
data-options="label:'Language:',
labelPosition:'top'">
<option value="ar">Arabic</option>
<option value="nl">Dutch</option>
<option value="en" selected="selected">
English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="hi">Hindi</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
</select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<!--To create link using EasyUI -->
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="submitForm()"
style="width:80px">
Submit
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearForm()"
style="width:80px">
Reset
</a>
</div>
</div>
<script>
// Submit the form
function submitForm(){
$('#formID').form('submit');
}
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
</script>
</body>
</html>
Output:
Example 2: The following code demonstrates loading form data from the current local file and remote JSON file.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="demo.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
</head>
<body>
<h2>
jQuery EasyUI load
user form data
</h2>
<div class="easyui-panel"
style="width:100%;max-width:400px;
padding:30px 60px;">
<form id="formID" method="post">
<!--Set class to form-floating-label
for special labels-->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--easyui-textbox class is used-->
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true,labelPosition:'top'">
</div>
<!--set the data-options for HTML validation -->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox"
name="email" style="width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--set multiline to true for textarea-->
<input class="easyui-textbox"
name="message" style="width:100%;height:60px"
data-options="label:'Message:',multiline:true,
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<select class="easyui-combobox"
name="language" style="width:100%"
data-options="label:'Language:',
labelPosition:'top'">
<option value="ar">Arabic</option>
<option value="nl">Dutch</option>
<option value="en" selected="selected">
English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="hi">Hindi</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
</select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<!-- To create link using EasyUI -->
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearForm()">
Reset
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="loadData()">
Load Data
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="loadRemoteData()">
LoadRemote
</a>
</div>
</div>
<script>
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
// Load data
function loadData(){
$('#formID').form('load',{
name:'Sahil',
email:'[email protected]',
message:'hello GFG',
language:'en'
});
}
// Load remote json file data
function loadRemoteData(){
$('#formID').form('load','form-data.json');
}
</script>
</body>
</html>
form-data.json: The following is the data for file "form-data.json" which is used in the above code.
{
"name":"sandeep",
"email":"[email protected]",
"message":"Hello GFG",
"language":"hi"
}Output:
Example 3: The following code shows how to enable validation using the jQuery EasyUI plugin.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="demo.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
</head>
<body>
<h2>
jQuery EasyUI load user form data
</h2>
<div class="easyui-panel"
style="width:100%;max-width:400px;padding:30px 60px;">
<!--set novalidate to true in data-options-->
<form id="formID" method="post"
data-options="novalidate:true">
<!--set class to form-floating-label for special labels-->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--easyui-textbox class is used -->
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true,labelPosition:'top'">
</div>
<!--set the data-options for HTML validation -->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox" name="email"
style="width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<!--To create link using EasyUI -->
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="submitForm()">
Submit
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearForm()">
Reset
</a>
</div>
</div>
<script>
// submit the form
function submitForm(){
$('#formID').form('submit',{
onSubmit:function(){
return $(this)
.form('enableValidation')
.form('validate');
}
});
}
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing