Skip to content
Related Articles

Related Articles

jQWidgets jqxValidator closeOnClick Property

View Discussion
Improve Article
Save Article
  • Last Updated : 03 Nov, 2021
View Discussion
Improve Article
Save Article

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxValidator is used for validation of the HTML form with the help of JavaScript. It has some set of build-in rules according to the requirement for the validation of the user inputs, e-mail, SSN, ZIP, max value, min value, interval, etc. The custom rules can also be written as per the specific requirements.

The closeOnClick property is used for setting or getting whether the hints of the specified jqxValidator will be closed after clicking on them or not. This method accepts two possible values that are true and false.

Syntax:

  • For setting the closeOnClick property.

    $('#jqxValidator').jqxValidator({ closeOnClick: true });
  • For getting the closeOnClick property.

    var closeOnClick = 
        $('#jqxValidator').jqxValidator('closeOnClick');

 

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>

Example: The below example illustrates the jQWidgets closeOnClick property. In the below example, the value of the closeOnClick property has been set to true.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    "jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" 
        src="scripts/jquery.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxvalidator.js"></script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxValidator closeOnClick Property
        </h3>
        <form id="Employee_Form">
            <table>
                <tr>
                    <td>Employee_Name:</td>
                    <td>
                        <input type="text" id="Employee_Name" />
                    </td>
                </tr>
                <tr>
                    <td>Employee_Id:</td>
                    <td>
                        <input type="text" id="Employee_Id" />
                    </td>
                </tr>
                <tr>
                    <td>Designation:</td>
                    <td>
                        <input type="text" id="Designation" />
                    </td>
                </tr>
                <tr>
                    <td>Base_Location:</td>
                    <td>
                        <input type="text" id="Base_Location" />
                    </td>
                </tr>
            </table>
        </form>
        <input type="button" style="margin:28px;" 
            id="button_for_closeOnClick"
            value="Value of the closeOnClick property" />
        <div id="log"></div>
        <script type="text/javascript">
  
            $(document).ready(function () {
                $('#Employee_Form').jqxValidator({
                    closeOnClick: true,
                    Rules: [{
                        input: '#Employee_Name',
                        message: 'Employee name is mandatory!',
                        rule: 'required'
                    },
                    {
                        input: '#Employee_Id',
                        message: 'Employee_Id is mandatory!',
                        rule: 'required'
                    },
                    {
                        input: '#Designation',
                        message: 'Designation is mandatory!',
                        rule: 'required'
                    },
                    {
                        input: '#Base_Location',
                        message: 'base location is mandatory!',
                        rule: 'required'
                    }],
                });
                $("#button_for_closeOnClick").jqxButton({
                    width: 300
                });
                $('#Employee_Form').jqxValidator('validate');
                $("#button_for_closeOnClick").click(
                    function () {
                        var Value_of_closeOnClick =
                            $('#Employee_Form').
                                jqxValidator(
                                    'closeOnClick');
                        $("#log").html(JSON.stringify(
                            Value_of_closeOnClick));
                    });
            });
        </script>
    </center>
</body>
  
</html>


Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxvalidator/jquery-validator-api.htm?search=


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!