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
How to design calendar for web page using jQuery EasyUI ? 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. In this article, we will learn how to design a calendar feature for our
2 min read
How to design complex layout for webpage using jQuery EasyUI ? 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.In this article, we will learn to design the basic and complex layout fo
4 min read
How to design checkbox selection for webpage using jQuery EasyUI ? 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.In this article, we will learn to design single and multiple select chec
3 min read
How to create lists and links using jQuery EasyUI Mobile ? In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile.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 mo
4 min read
How to design login dialog using jQuery EasyUI Mobile ? 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. In this article, we will learn to design login dialog and message dialo
3 min read