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()プラグインを初期化するコードです。他の jQuery プラグインと大差なく、DOM 対応の内部にのみ配置することになっています。あなたがすでに述べたように、「$("#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

document.ready()関数を起動するには、body タグの前にすべての JS を含める必要があります。

例を次に示します: http://jsfiddle.net/ZgGZ3/3/

于 2013-03-04T14:22:00.627 に答える