我有一个jQuery对话框表单,提交后我正在尝试验证字段。我正在使用jQuery Validation插件进行验证。在此我面临一个问题,未调用validate函数。
我正在发布一些代码片段:
$("#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() {},但没有成功。
$(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-->
这是Page的来源:
<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-->
感谢大家的帮助,我发现了另一种进行验证的方法,感觉很简单。
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; } });