我有一个jQuery Dialog表单，在提交时我正在尝试验证字段。我正在使用jQuery Validation plugin进行验证。在这方面我遇到了一个问题，验证函数没有被调用。
我发布了一些我的代码片段：
$("#register-dialog-form").dialog({
autoOpen: false,
height: 350,
width: 450,
modal: true,
buttons: {
'Register': function() {
$("#registerFrm").validate({
rules: {
accountid: "required",
name: {
required: true,
minlength: 5
},
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
}
},
messages: {
firstname: "Please enter your firstname",
accountid: "Please enter the lastname",
name: "Please enter a user friendly name",
username: {
required: "Please enter a username",
minlength: jQuery.format("Enter at least {0} characters")
},
password: {
required: "Please provide a password",
minlength: jQuery.format("Password must be at least {0} characters long")
}
}
});
//******************
//TODO: Need to submit my form here
//******************
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
//$('registerFrm').clearForm();
}
});
有人可以告诉我这里我做错了什么。我也尝试将验证放入$(document).ready(function() {}，但没有成功。
这是html代码：
<div id="register-dialog-form" title="Register Account - Master" align="center" style="display: none">
<s:form name="registerFrm" id="registerFrm" action="registermaster" method="POST">
<table width="90%" border="0" class="ui-widget">
<tr>
<td>
<s:textfield label="Account Id" name="accountid" id="accountid" cssClass="text ui-widget-content ui-corner-all" />
</td>
</tr>
<tr>
<td>
<s:textfield label="Name" name="name" id="name" cssClass="text ui-widget-content ui-corner-all" />
</td>
</tr>
<tr>
<td>
<s:textfield label="Username" name="username" id="username" cssClass="text ui-widget-content ui-corner-all" />
</td>
</tr>
<tr>
<td>
<s:password label="Password" name="password" id="password" cssClass="text ui-widget-content ui-corner-all" />
</td>
</tr>
</table>
</s:form>
</div><!--End of RegisterAcc form-->
以下是页面来源：
<div id="register-dialog-form" title="Register Account - Master" align="center" style="display: none">
<form id="registerFrm" name="registerFrm" onsubmit="return true;" action="registermaster.action" method="POST"><table class="wwFormTable">
<table width="90%" border="0" class="ui-widget">
<tr>
<td>
<tr>
<td class="tdLabel"><label for="accountid" class="label">Account Id:</label></td>
<td
><input type="text" name="accountid" value="" id="accountid" class="text ui-widget-content ui-corner-all"/></td>
</tr>
</td>
</tr>
<tr>
<td>
<tr>
<td class="tdLabel"><label for="name" class="label">Name:</label></td>
<td
><input type="text" name="name" value="" id="name" class="text ui-widget-content ui-corner-all"/></td>
</tr>
</td>
</tr>
<tr>
<td>
<tr>
<td class="tdLabel"><label for="username" class="label">Username:</label></td>
<td
><input type="text" name="username" value="" id="username" class="text ui-widget-content ui-corner-all"/></td>
</tr>
</td>
</tr>
<tr>
<td>
<tr>
<td class="tdLabel"><label for="password" class="label">Password:</label></td>
<td
><input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all"/></td>
</tr>
</td>
</tr>
</table>
</table></form>
</div><!--End of RegisterAcc form-->
答案 0 :(得分：0)
JSP / Struts2 / etc是服务器端技术，它在服务器机器上运行，生成一堆HTML并通过网络将其发送到客户端。 Javascript / jQuery在网络另一端的客户端机器上运行，对生成它的服务器端代码一无所知，它只看到纯HTML DOM树。右键单击webbrowser中的页面，然后选择查看源。这一切也正是JS / jQuery所看到的。没有一行JSP / Struts2代码。必须在HTML源代码中找到问题的原因。以下Struts2行例如
<s:form id="registerFrm">
可能不一定生成
<form id="registerFrm">
但也许是
<form id="somePrefix_registerFrm_orSomeSuffix">
这当然不是$('#registerFrm')在jQuery中提供的。您需要更新JS / jQuery代码以使用生成的ID，即$('#somePrefix_registerFrm_orSomeSuffix')。
总结：不要在服务器端查看JSP / Struts2 / whateverMVCframework代码，而是在编写JS / jQuery代码时生成HTML输出。
答案 1 :(得分：0)
感谢帮助人员，我找到了另一种方法来进行验证，觉得这很简单。
var $inputs = $('#registerFrm :input:visible');
var inputCount = $('#registerFrm :input:visible').length;
$inputs.each(function() {
if ($(this).val() == null || $(this).val() == '' || $(this).val() == 0) {
$(this).focus();
$(this).css("background", "#F3DAFC");
return false;
} else if ($(this).val() != null) {
$(this).css("background", "white");
--inputCount;
}
});
答案 2 :(得分：0)
我在jQuery Validator插件（http://jqueryui.com/dialog/）中使用jQuery Dialog插件（http://jqueryvalidation.org/）时遇到了同样的问题。问题是jQuery-UI对话框没有附加到表单，它附加在＆lt; / body＆gt;之前，因此要验证的元素在＆lt; form＆gt;＆lt; / form＆gt;之外。部分。
要解决此问题，请在Dialog初始化中添加“open”属性。在这个属性中，我添加了一个函数，它将我的Dialog div元素包装在一个表单元素中，然后初始化验证器。
另外，我在Dialog初始化时添加了“close”属性。在这个属性中，我添加了一个函数，它打开我打开事件包裹的表单并重置验证器。
一个简单的例子，
<script type="text/javascript">
var validator;
$(document).ready(function () {
$("#dialog-id").dialog({
autoOpen: false,
resizable: true,
width: 450,
modal: true,
// Open event => wraps the Dialog source and validate the form.
open: function (type, data) {
$(this).wrap("<form id=\"form-id\" action=\"./\"></form>");
validator = $("#form-id").validate();
},
// Close event => unwraps the Dialog source and reset the form to be ready for the next open!
close: function (type, data) {
validator.resetForm();
$(this).unwrap();
},
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create": function () {
validator.form();
}
}
});
</script>
以上javascript的一些html，
<div id="dialog-id" title="Thematic Section">
<div class="form_description">
Create a thematic section for a conference type.
</div>
<ul style="list-style-type:none;">
<li>
<label class="description" for="conferencetype_id">Conference Type:</label>
<div>
<select id="conferencetype_id" name="conferencetype_id" style="width:150px;">
<option value="1" selected="selected">Type-1</option>
<option value="2" selected="selected">Type-2</option>
</select>
</div>
</li>
<li>
<label class="description" for="title">Title:</label>
<div>
<input id="title" name="title" type="text" maxlength="100" value="" style="width:350px;" required/>
</div>
</li>
</ul>
</div>