Come dovrei usare il plugin JQuery Validate per avere un messaggio di errore per dire 3 campi. Ad esempio 3 campi dob. Per impostazione predefinita ricevo 3 messaggi di errore se tutti e 3 i campi sono lasciati vuoti. Voglio solo un errore collegato a 3 campi. Se alcuni sono vuoti, l’errore si presenta.
Simile a quello di Chris
$("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); } }); È ansible utilizzare l’opzione gruppi per raggruppare gli input. Se ciascuno degli ingressi ha un messaggio di errore, verrà visualizzato solo uno.
Probabilmente vorrai sovrascrivere i messaggi associati a ciascuno dei campi, quindi avranno più senso. Ad esempio, per impostazione predefinita, potresti ricevere un messaggio di errore come “Questo campo è richiesto”. Bene, questo non fa l’utente molto bene quando ci sono tre input. Probabilmente vuoi ignorare il messaggio per dire “Il numero locale è richiesto”. Per questo esempio, ho annullato tutti i messaggi di errore con “Si prega di inserire un numero di telefono valido”.
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" } },
Ho pensato di doverlo condividere. Il codice completo che ha funzionato per me.
HTML
JS
//hay que poblar selects de fecha dia = $('#fechanacimdia'); mes = $('#fechanacimmes'); ano = $('#fechanacimano'); dia.append(''); for(i=1;i<=31;i++) { dia.append(''); } meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"] mes.append(''); for(i=1;i<=12;i++) { mes.append(''); } d = new Date(); year = d.getFullYear(); maxage = 100; minage = 16; ano.append(''); for(i=year-minage;i>=year-maxage;i--) { ano.append(''); } //--------- 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; });
questo è per la parte HTML:
Date of birth:
*
dd
mm
yyyy
Questo è lo script che ho usato:
$(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 }, }, }); });
tutta la parte HTML può essere personalizzata come meglio credi. Ho usato questo layout complesso perché avevo bisogno di aggiungere questo campo a un modulo già esistente. Ma è un esempio che funziona! Spero che aiuti chiunque!
La mia opinione è stata quella di cambiare il jQuery validator per validare qualsiasi cosa con l’attributo validateable su di esso e gli input standard. Qui puoi ottenere la versione modificata del 1.9.0 del plugin
Fondamentalmente si importa il nuovo validatore jQuery e si fa qualcosa del genere:
Le modifiche richieste su jQuery validator dovevano renderlo utilizza .attr('name') posto di .name perché .name funziona solo sui campi del modulo. E modificare i gestori di chiavi e così via per legarli ai bambini dell’elemento validateable .
Questo è un po ‘più dinamico dei gruppi in quanto consente di convalidare i campi in relazione tra loro piuttosto che come singole entity framework.
Questo codice mostrerà un errore comune se uno dei campi richiesti è vuoto.
Un paio di opzioni: controlla errorContainer . Puoi fare in modo che tutti gli errori vadano a un
completamente separato. Oppure puoi controllare il blocco invalid e avere semplicemente un comando errorMessage.show() .