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模式窗口

回答

相关问题