Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to load and validate form data using jQuery EasyUI ?

  • Last Updated : 31 Dec, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :