Question

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

当我在$("#create_form").validate内使用$document.ready(时，该功能正常工作。

<!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>

Answer 1

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

.validate() is the code that initializes the plugin。你应该把它只放在一个DOM中，与任何其他jQuery插件没什么不同。即使你已经说过，“function $("#create_form").validate在我$document.ready内使用它时工作正常

将其放回DOM准备好的位置。我只是在模式框内的$("#create_form").submit()按钮代码中添加了一行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");
    });

});

Answer 2

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

以下是一个示例：http://jsfiddle.net/ZgGZ3/3/

jQuery Validation插件在jQuery UI模式窗口中不起作用

2 个答案: