Open In App

How to load and validate form data using jQuery EasyUI ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • Before execution:

  • After execution:

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:'sahil@gmail.com',                
                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":"sandeep@gmail.com",  
"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:



Last Updated : 31 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads