jQuery验证插件没有'；无法在jQuery UI模式窗口中工作
我试图在jQueryUI模式框中验证表单，但jQueryValidation似乎不想使用模式窗口，或者我真的不知道将此验证代码放在哪里 当我在jQuery验证插件没有'；无法在jQuery UI模式窗口中工作,jquery,jquery-ui,jquery-validate,Jquery,Jquery Ui,Jquery Validate,我试图在jQueryUI模式框中验证表单，但jQueryValidation似乎不想使用模式窗口，或者我真的不知道将此验证代码放在哪里 当我在$document.ready（中使用该函数时，该函数$（“#创建表单”）.validate运行良好 jQueryUI对话框-模态表单 $（函数（）{ $（“#对话框窗体”）.dialog({ 自动打开：错误， 身高：500， 宽度：400， 莫代尔：是的， 按钮：{ 提交：函数（）{ $（“#创建表格”）。验证({ //submitHandler:函数
$document.ready（$（“#创建表单”）.validate运行良好
jQueryUI对话框-模态表单
$（函数（）{
$（“#对话框窗体”）.dialog({
自动打开：错误，
身高：500，
宽度：400，
莫代尔：是的，
按钮：{
提交：函数（）{
$（“#创建表格”）。验证({
//submitHandler:函数（表单）{
//doAjaxPost（）；
//},
规则：{
姓名：{
要求：正确，
最小长度：3，
最大长度：16，
},
密码：{
要求：正确，
最小长度：3，
最大长度：16，
},
},
信息：{
姓名：{
必填：“登录-是必填字段”，
minlength:“名称应至少包含{0}个符号”，
maxlength:“最大符号数-{0}”，
},
密码：{
必填：“密码-是必填字段”，
minlength:“密码应至少包含{0}个符号”，
maxlength:“密码应包含最多{0}个符号”，
},
},
});
//$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
//关闭：函数（）{
//allFields.val（“”.removeClass（“ui状态错误”）；
//}
});
$（“#创建用户”）
.按钮（）
。单击（函数（）{
$（“#对话框窗体”）。对话框（“打开”）；
});
});
所有表单字段都是必需的
名称
电子邮件
密码
现有用户：
名称
电子邮件
密码
无名氏
厕所。doe@example.com
约翰多尔
创建新用户
为了启动document.ready（）
函数，您需要在结束正文标记之前包含所有JS
下面是一个示例：我看到您将.validate（）
放在对话框的提交
按钮内
。您应该只将其放在DOM ready中，与任何其他jQuery插件没有太大区别。即使您已经说过，“function$（“#create_form”）。当我在$document.ready中使用它时，validate
工作正常
将它放回DOM ready中它所属的位置。我只是添加了一行$（“#create_form”）.submit（）
到模式框中的submit
按钮代码中，它工作正常
工作演示：
表单加载时是否显示在页面上？还是“已创建”当用户触发弹出窗口时？按此按钮可创建一个弹出窗口创建新用户，我想在提交时验证用户的输入，但在页面加载时表单不可见，对吗？我修复了您的代码：这使我的表单在开始时可见，弹出窗口根本不起作用。验证仍然不起作用您需要吗d将所有Javascript放在结束正文标记之前。我更新了你的代码。我只复制了你的Javascript代码，我的验证仍然不起作用。加载在文档底部的JS，在所有其他JS之后加载了你的自定义函数。你有到实际页面的链接吗？如果不能够看看你所有的代码。我认为这是一种错误，伙计。无论如何，谢谢你的支持。我现在使用普通的Javascript验证
<!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>
$(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");
});
});