博客

jQWidgets jqxValidator closeOnClick属性

  • Post category:jquery

jQWidgets jqxValidator closeOnClick属性详解

属性介绍

closeOnClick是jQWidgets控件库中jqxValidator验证器组件的一个布尔属性，用于表示单击（点击）页面上的任何一个元素将关闭验证错误消息。

语法格式

closeOnClick属性的语法格式如下：

closeOnClick: Boolean;

使用说明

closeOnClick属性值默认为false，表示当用户单击页面上的任何一个元素时，将不会关闭验证错误消息。将closeOnClick属性设置为true时，当用户单击页面上的元素时，会自动关闭验证错误消息。

例如，我们有一个带有表单的网页，用户输入信息并单击提交按钮，jqxValidator组件验证用户信息中的错误。如果错误存在，则将弹出一个错误信息弹出框。如果 closeOnClick属性值为false，则用户必须点击弹出框上的关闭按钮才能关闭弹出框，否则弹出框将一直保持打开状态。如果closeOnClick属性值为true，用户可以单击页面上的任何一个元素来关闭验证错误消息弹出框。

下面是一个带有错误信息弹出框的示例代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>Example using jqxValidator closeOnClick Property</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>Example using jqxValidator closeOnClick Property</h2>
    <form id="exampleForm">
        <table>
            <tr>
                <td>
                    <label for="name">Name:</label>
                </td>
                <td>
                    <input type="text" id="name" name="name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="email">Email:</label>
                </td>
                <td>
                    <input type="text" id="email" name="email">
                </td>
            </tr>
            <tr>
                <td>

                </td>
                <td>
                    <input value="Submit" type="submit">
                </td>
            </tr>
        </table>
    </form>
    <div id="messageBox" style='display: none;'>
        <div>Please fix the following errors:</div>
        <div><span></span></div>
    </div>
    <script>
        $(document).ready(function () {
            $('#exampleForm').jqxValidator({
                focusout: true,
                closeOnClick: true,
                rules: [
                    { input: '#name', message: 'Name is required!', action: 'keyup, blur', rule: 'required' },
                    { input: '#email', message: 'Email is required!', action: 'keyup, blur', rule: 'required' }
                ]
            });
            $('#exampleForm').on('submit', function () {
                if ($('#exampleForm').jqxValidator('validate')) {
                    alert('Form is valid!');
                }
                else {
                    $('#messageBox span').html($('#exampleForm').jqxValidator('getErrors')[0]);
                    $('#messageBox').jqxWindow('open');
                }
                return false;
            });
            $('#messageBox').jqxWindow({
                height: 150,
                width: 300,
                resizable: false,
                isModal: true,
                autoOpen: false,
                position: { x: 'center', y: 'center' },
            });
        });
    </script>
</body>
</html>

示例说明

在上述示例中，我们首先定义了一个form表单，名为exampleForm，其中包含两个输入框(input)和一个提交按钮(submit)。

我们使用了jqxValidator组件验证exampleForm表单中的错误。在rules参数中，我们将输入框name和email标记为必填，jqxValidator组件将通过调用其默认内置规则执行验证。

在提交表单时，如果有任何错误，将通过弹出层div显示一个错误消息，将其放在messageBox中。

我们通过将closeOnClick设置为true来设置单击页面的任何元素关闭验证错误消息弹出框。

Tags: