Open In App

How to load and validate form data using jQuery EasyUI ?

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
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:

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:




Next Article
How to design datalists for mobiles using jQuery EasyUI Mobile ?

G
geetanjali16
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox