JQueryvalidation一个错误的多个字段
我将如何使用JQueryvalidation插件有3个字段的错误消息。 例如3个dob字段。 默认情况下，如果所有3个字段留空，我会得到3个错误信息。 我只想要一个错误链接到3个字段。 如果有任何空白，则出现错误。
类似于克里斯的
$("form").validate({ rules: { DayOfBirth: { required: true }, MonthOfBirth: { required: true }, YearOfBirth: { required: true } }, groups: { DateofBirth: "DayOfBirth MonthOfBirth YearOfBirth" }, errorPlacement: function(error, element) { if (element.attr("name") == "DayOfBirth" || element.attr("name") == "MonthOfBirth" || element.attr("name") == "YearOfBirth") error.insertAfter("#YearOfBirth"); else error.insertAfter(element); } }); 您可以使用groups选项将input组合在一起。 如果每个input都有错误信息，则只显示一个。
你可能会想要覆盖与每个字段相关的消息，所以他们会更有意义。 例如，默认情况下，您可能会收到错误消息，如“此字段是必需的”。 那么，当有三个input的时候，这对用户来说并不是很好。 您可能想重写该消息来说“本地号码是必需的”。 对于这个例子，我只是用“请input一个有效的电话号码”覆盖所有的错误信息。
<input type="text" name="countryCode" /> <input type="text" name="areaCode" /> <input type="text" name="localNumber" /> groups: { phoneNumber: "countryCode areaCode localNumber" }, rules: { 'countryCode': { required: true, minlength:3, maxlength:3, number:true }, 'contactInformation[areaCode]': { required: true, minlength:3, maxlength:3, number:true }, 'contactInformation[localNumber]': { required: true, minlength:4, maxlength:4, number:true }, }, messages: { "countryCode": { required: "Please enter a valid Phone Number", minlength: "Please enter a valid Phone Number", maxlength: "Please enter a valid Phone Number", number: "Please enter a valid Phone Number" }, "areaCode": { required: "Please enter a valid Phone Number", minlength: "Please enter a valid Phone Number", maxlength: "Please enter a valid Phone Number", number: "Please enter a valid Phone Number" }, "localNumber": { required: "Please enter a valid Phone Number", minlength: "Please enter a valid Phone Number", maxlength: "Please enter a valid Phone Number", number: "Please enter a valid Phone Number" } },
我以为我应该分享这个。 完整的代码，为我工作。
HTML
<div class="clearfix bl"> <label>Fecha de nacimiento</label> <select name="fechanacimdia" id="fechanacimdia"></select> <select name="fechanacimmes" id="fechanacimmes"></select> <select name="fechanacimano" id="fechanacimano"></select> </div>
JS
//hay que poblar selects de fecha dia = $('#fechanacimdia'); mes = $('#fechanacimmes'); ano = $('#fechanacimano'); dia.append('<option>Día</option>'); for(i=1;i<=31;i++) { dia.append('<option value="'+i+'">'+i+'</option>'); } meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"] mes.append('<option>Mes</option>'); for(i=1;i<=12;i++) { mes.append('<option value="'+i+'">'+meses[i-1]+'</option>'); } d = new Date(); year = d.getFullYear(); maxage = 100; minage = 16; ano.append('<option>Año</option>'); for(i=year-minage;i>=year-maxage;i--) { ano.append('<option value="'+i+'">'+i+'</option>'); } //--------- validate ------------------------ $('#formulario').validate({ rules: { fechanacimdia: { required: true }, fechanacimmes: { required: true }, fechanacimano: { required: true, validdate: true } }, groups: { fechanacim: "fechanacimdia fechanacimmes fechanacimano" }, messages: { fechanacimdia: "Fecha de nacimiento no es válida.", fechanacimmes: "Fecha de nacimiento no es válida.", fechanacimano: "Fecha de nacimiento no es válida." }, }); //funcion auxiliar para validar fecha de nacimiento correcta jQuery.validator.addMethod("validdate", function(value, element) { var month = +$('#fechanacimmes').val() - 1; // Convert to numbers with "+" prefix var day = +$('#fechanacimdia').val(); var year = +$('#fechanacimano').val(); var date = new Date(year, month, day); // Use the proper constructor return date.getFullYear() == year && date.getMonth() == month && date.getDate() == day; });
这是HTML部分：
<div> <p class="myLabel left">Date of birth:</p> <p class="mandatory left">*</p> <div class="left"> <p><input type="text" name="dobDay" class="required" /></p> <p><i>dd</i></p> </div> <div class="left"> <p><input type="text" name="dobMonth" class="required" /></p> <p><i>mm</i></p> </div> <div class="left"> <p><input type="text" name="dobYear" class="required" /></p> <p><i>yyyy</i></p> </div> <div class="clear"></div> <div class="myError"> <label for="dateOfBirth" class="error">Please enter a valid date.</label> </div> </div>
这是我使用的脚本：
$(document).ready(function() { $("#myForm").validate({ groups: { dateOfBirth: "dobDay dobMonth dobYear" }, rules: { 'dobDay': { required: true, minlength:1, maxlength:2, range: [1, 31], number:true }, 'dobMonth': { required: true, minlength:1, maxlength:2, range: [1, 12], number:true }, 'dobYear': { required: true, minlength:4, maxlength:4, number:true }, }, }); });
所有的HTML部分都可以自定义，只要你认为合适。 我使用了这些复杂的布局，因为我需要将这个字段添加到已经存在的表单中。 但这是一个例子，工程！ 希望它能帮助任何人！
我承担这一切是改变jQuery validator以validation任何与它的validateable属性以及标准input。 你可以在这里获得1.9.0的插件修改版本
基本上你导入新的jQueryvalidation器，并做这样的事情：
<script> $.validator.addMethod( "groupnotnull", function(value, element) { return $("input[type='text']:filled",element).length!=0; }, function(regexp, element) { return "At least one input must be specified"; } ); </script> <div validateable="true" name="groupValidated" groupnotnull="true"> <input type="text" name="foo"/> <input type="text" name="blah"/> </div>
jQuery validator所需的修改是使它使用.attr('name')而不是.name因为.name只能在表单字段上工作。 并修改键处理程序等来绑定到validateable元素的子项。
这比团体更具dynamic性，因为它允许字段相对于彼此而不是仅仅作为单个实体进行validation。
如果任何必填字段为空，此代码将显示一个常见错误。
<html> <head> <script src="jquery-latest.js"></script> <script> $(document).ready(function(){ $("#myform").validate({ invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { var message ='You missed ' + errors + ' fields.'; $("#messageBox").html(message); $("#messageBox").show(); } else { $("#messageBox").hide(); } }, showErrors: function(errorMap, errorList) { }, submitHandler: function() { alert("Submit!") } }) }); </script> </head> <body> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <div id="messageBox"></div> <ul id="errorlist"></ul> <form id="myform" action="/loginurl" method="post"> <label>DOB1</label> <input name="dob1" class="required" /> <label>DOB2</label> <input name="dob2" class="required" /> <label>DOB3</label> <input name="dob3" class="required" /> <br/> <input type="submit" value="Submit"/> </form> </body> </html>
几个选项：检查errorContainer 。 你可以把所有的错误都转换成完全独立的<div> 。 或者你可以检查出invalid块，只需要一个errorMessage.show()命令。
