jQuery驗證插件不工作在jQuery UI模式窗口

我想驗證一個jQuery UI模式框中的表單，但它看起來像jQuery驗證不想使用模態窗口或我不真的知道把驗證碼放在哪裏。jQuery驗證插件不工作在jQuery UI模式窗口

那功能$("#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>[email protected]</td> 
<td>johndoe1</td> 
</tr> 
</tbody> 
</table> 
</div> 
<button id="create-user">Create new user</button> 
</body> 
</html>

來源

2013-03-04 gabriel angelos

出現在加載頁面上的形式？或者當用戶觸發彈出窗口時「創建」了嗎？ – adamdehaven 2013-03-04 14:14:41

彈出窗口是通過按此按鈕創建的而我想驗證用戶在提交時的輸入點擊 – 2013-03-04 14:17:39

但是頁面加載時窗體不可見，正確？ – adamdehaven 2013-03-04 14:17:59

-1

爲了使document.ready()函數能夠觸發，您需要在關閉body標籤前包含所有JS。

下面是一個例子：http://jsfiddle.net/ZgGZ3/3/

來源

2013-03-04 14:22:00 adamdehaven

這使得我的表單在開始處可見，並且彈出式窗口根本不起作用。驗證仍然不起作用 – 2013-03-04 14:24:29

您需要將所有Javascript放在關閉body標籤之前。我更新了你的代碼。 – adamdehaven 2013-03-04 14:25:27

糟糕 - 已經鏈接到錯誤的小提琴。現在是正確的。 – adamdehaven 2013-03-04 14:41:40

我看你已經把.validate()的submit按鈕內部的對話框。

.validate() is the code that initializes the plugin。你應該只把它放在DOM裏面，和其他jQuery插件沒什麼不同。即使你已經說過，「當我內$document.ready用它功能$("#create_form").validate工作得很好」

把它內的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-04 15:50:25 Sparky

jQuery驗證插件不工作在jQuery UI模式窗口

回答

相關問題