EasyUI jQuery validateBox Widget

Last Updated : 18 Apr, 2022

EasyUI is an 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 validate box using jQuery EasyUI. The validate box is designed to validate the form input fields.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-validatebox">

Properties:

required: It specifies that the field must be filled before submission.
delay: It specifies a delay to validate from the last input value.
missingMessage: This is the Tooltip text that appears when the text box is empty.
invalidMessage: This is the Tooltip text that appears when the content of the text box is invalid.
tipPosition: This defines the position of the tip message when the content of the text box is invalid.
deltaX: This defines Tooltip offset in the X-direction.
novalidate: This specifies whether to turn off validation.
editable: This specifies whether the user can type text directly into the field.
disabled: This specifies whether to disable the validate box.
readonly: This specifies whether the component is read-only.
validateOnCreate: This specifies whether to validate after creating the component.
validateOnBlur: This specifies whether to validate when losing focus.

Events:

onBeforeValidate: This event fires before the validation on a field.
onValidate: This event fires when validating on a field.

Methods:

options: Returns the options object.
destroy: Remove and destroy the component.
validate: Do the validation to determine whether the content of the text box is valid.
isValid: Call validate method and return the validation result.
enableValidation: Enable validation.
disable Validation: Disable validation.
resetValidation: Reset validation.
enable: Enable the component.
disable: Disable the component.
readonly: Enable/Disable read only mode

Approach:

First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"> </script>



<script type="text/javascript" src="jquery.easyui.min.js"> </script>



<script type="text/javascript" src="jquery.easyui.mobile.js">

</script>

Example:

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="themes/mobile.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> 
    
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 

<script type="text/javascript"> 
  $(document).ready(function (){ 
      $('#gfg').validatebox({
          required: true,
            validType: 'email'
      }); 
  }); 
    </script> 
</head> 

<body>

    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery validatebox widget</h3>

  Enter E-mail : <input id="gfg" class="easyui-validatebox">
  
</body>
</html>