jQuery 验证插件在 jQuery UI 模式窗口中不起作用答案

【问题标题】：jQuery Validation plugin doesn't work in jQuery UI modal windowjQuery 验证插件在 jQuery UI 模式窗口中不起作用
【发布时间】：2025-12-26 20:55:12
【问题描述】：

我正在尝试验证 jQuery UI 模态框中的表单，但 jQuery Validation 似乎不想使用模态窗口，或者我真的不知道在哪里放置此验证代码。

当我在$document.ready( 中使用该函数$("#create_form").validate 时，它运行良好。

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />


    <script>

$(function() {

     $( "#dialog-form" ).dialog({
         autoOpen: false,
         height: 500,
         width:  400,
         modal: true,

         buttons: {

            Submit: function() { 

                $("#create_form").validate({

                    //submitHandler: function(form) {
                    //  doAjaxPost();
                    //},

                    rules:{
                        name:{
                            required: true,
                            minlength: 3,
                            maxlength: 16,
                        },
                        password:{
                            required: true,
                            minlength: 3,
                            maxlength: 16,
                        }, 

                   },
                   messages:{
                        name:{
                            required: "Login - is a mandatory field",
                            minlength: "Name should contain minimum {0} symbols",
                            maxlength: "Maximum symbols - {0}",
                        },
                        password:{
                            required: "Password - is a mandatory field",
                            minlength: "Password should contain minimum {0} symbols",
                            maxlength: "Password should contain maximum {0} symbols",
                        },

                   },

                });

                //$( this ).dialog( "close" );
            },

            Cancel: function() {
                $( this ).dialog( "close" );
            }
         },
         //close: function() {
         //allFields.val( "" ).removeClass( "ui-state-error" );
         //}
 });

     $( "#create-user" )
     .button()
     .click(function() {
     $( "#dialog-form" ).dialog( "open" );
     });

});

</script>

</head>
<body>

<!-- Create user form -->
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form id="create_form">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>


<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>
</body>
</html>

【问题讨论】：

表单加载时是否出现在页面上？还是用户触发弹窗时“创建”的？
按下此按钮会创建一个弹出窗口我想在提交点击时验证用户的输入
但是页面加载时表单是不可见的，对吧？
我修复了你的代码：jsfiddle.net/7bA8M

标签： jquery jquery-ui jquery-validate

【解决方案1】：

我看到您已将.validate() 放在对话框的submit 按钮内。

.validate() is the code that initializes the plugin。你应该只把它放在准备好的 DOM 中，与任何其他 jQuery 插件没有太大区别。即使您已经说过，“当我在 $document.ready 中使用它时，“函数 $("#create_form").validate 工作正常”

将它放回 DOM 中准备好它所属的位置。我只是在模态框内的Submit 按钮代码中添加了一行$("#create_form").submit()，它工作正常。

工作演示：http://jsfiddle.net/7bA8M/

$(document).ready(function() {

    $("#create_form").validate({
        /*submitHandler: function(form) {
            doAjaxPost();
        },*/
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 16
            },
            password: {
                required: true,
                minlength: 3,
                maxlength: 16
            }
        },
        messages: {
            name: {
                required: "Login - is a mandatory field",
                minlength: "Name should contain minimum {0} symbols",
                maxlength: "Maximum symbols - {0}"
            },
            password: {
                required: "Password - is a mandatory field",
                minlength: "Password should contain minimum {0} symbols",
                maxlength: "Password should contain maximum {0} symbols"
            }
        }
    });

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 500,
        width: 400,
        modal: true,
        buttons: {
            Submit: function () {
                $("#create_form").submit();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#create-user").button().click(function () {
        $("#dialog-form").dialog("open");
    });

});

【讨论】：

【解决方案2】：

您需要在结束正文标记之前包含所有 JS，以便您的 document.ready() 函数触发。

这是一个例子：http://jsfiddle.net/ZgGZ3/3/

【讨论】：

这使我的表单在开始时可见，并且弹出窗口根本不起作用。验证仍然不起作用
您需要将所有 Javascript 放在结束正文标记之前。我更新了你的代码。
我只复制了你的javascript代码，我的验证仍然不起作用
JS 是否加载在文档的底部，而您的自定义函数是在所有其他 JS 之后加载的？您有指向实际页面的链接吗？如果无法查看所有代码，很难判断发生了什么。
我认为这是一个错误，伙计。无论如何，感谢您的支持。我现在使用的是普通的 Javascript 验证