Comment utiliser le plugin JQuery Validate pour avoir un message d'erreur pour 3 champs, par exemple. Par exemple 3 champs dob. Par défaut, j'obtiendrai 3 messages d'erreur si les 3 champs sont laissés vides. Je veux seulement une erreur liée à 3 champs. Si l'un est vide, l'erreur apparaît.JQuery Valider plusieurs champs avec une seule erreur
Quelques options: consultez le errorContainer. Vous pouvez faire toutes les erreurs à un <div> complètement séparé. Ou vous pouvez vérifier le bloc invalid, et juste avoir une commande errorMessage.show().
Vous pouvez utiliser l'option groups pour regrouper les entrées. Si chacune des entrées a un message d'erreur, un seul sera affiché.
Vous voudrez probablement remplacer les messages associés à chacun des champs, ils auront donc plus de sens. Par exemple, par défaut, vous pouvez obtenir un message d'erreur du type "Ce champ est obligatoire". Eh bien, cela ne fait pas beaucoup de bien à l'utilisateur quand il y a trois entrées. Vous voulez probablement remplacer le message pour indiquer "Le numéro local est requis". Pour cet exemple, je viens de remplacer tous les messages d'erreur par "S'il vous plaît entrer un numéro de téléphone valide."
<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"
}
},
Ce code affichera une erreur commune si l'un des champs obligatoires est vide.
<html>
<head>
<script src="http://code.jquery.com/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>
similaires à Chris de
$("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);
}
});
cool, merci l'homme! –
avec mvc 3, comment écrire cet adaptateur jquery.validaet? – dfang
Merci ... Cela a fonctionné pour moi –
ceci est pour la partie 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>
Ceci est le script i utilisé:
$(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
},
},
});
});
toute la partie HTML peut Personnalisez comme bon vous semble. J'ai utilisé cette mise en page complexe parce que j'avais besoin d'ajouter ce champ à un formulaire déjà existant. Mais c'est un exemple qui fonctionne! J'espère que ça aide quelqu'un!
Je pensais que je devrais partager ceci. Le code complet qui a fonctionné pour moi.
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;
});
J'ai utilisé ce code et fonctionne très bien pour vérifier les dates ..mais quand je choisis le jour il ne vérifie pas si le mois ou l'année sont sélectionnés, il suffit de passer la validation. Avez-vous une idée de ce que cela pourrait être? – Limon
Mon avis sur la question était de changer quoi que ce soit pour valider jQuery validator avec l'attribut validateable sur elle ainsi que les entrées standard. Vous pouvez obtenir la 1.9.0 version modifiée du plugin here
Fondamentalement, vous importez le nouveau jquery validateur et de faire quelque chose comme ceci:
<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>
Les modifications nécessaires sur jQuery validator deviez faire utiliser .attr('name') au lieu de .name parce que .name ne fonctionne que sur les champs de formulaire. Et modifiez les gestionnaires de clés, etc. pour lier aux enfants de l'élément validateable.
Ceci est un peu plus dynamique que les groupes car il permet de valider les champs les uns par rapport aux autres plutôt que de les considérer comme des entités uniques.
Je pense, cette erreur apparaît même s'il y a une erreur de format ou autre – Starx