0

我正在尝试在 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>
4

2 回答 2

2

我看到你已经把对话框.validate()的按钮放在里面了。submit

.validate()是初始化插件的代码。你应该只把它放在准备好的 DOM 中，与任何其他 jQuery 插件没有太大区别。即使您已经说过，“$("#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");
    });

});
于 2013-03-04T15:50:25.673 回答
-1

您需要在结束 body 标记之前包含所有 JS 才能document.ready()触发您的函数。

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

于 2013-03-04T14:22:00.627 回答