Jak używać wtyczki walidacyjnej JQuery do wyświetlania jednego komunikatu o błędzie dla 3 pól. Na przykład 3 pola wyboru. Domyślnie otrzymam 3 komunikaty o błędach, jeśli wszystkie 3 pola pozostaną puste. Chcę tylko jeden błąd związany z 3 polami. Jeśli są puste, pojawia się błąd.JQuery Sprawdź poprawność wielu pól z jednym błędem
Kilka opcji: Sprawdź errorContainer. Wszystkie błędy można wprowadzić w całkowicie oddzielnym <div>. Lub możesz sprawdzić blok invalid i po prostu mieć komendę errorMessage.show().
Możesz użyć opcji groups, aby pogrupować dane wejściowe. Jeśli każde z wejść ma komunikat o błędzie, zostanie wyświetlony tylko jeden z nich.
Prawdopodobnie będziesz chciał przesłonić wiadomości związane z każdym z pól, więc będą miały więcej sensu. Na przykład domyślnie może pojawić się komunikat o błędzie "To pole jest wymagane". Cóż, to nie robi dużo dobrego dla użytkownika, gdy są trzy wejścia. Prawdopodobnie chcesz przesłonić wiadomość, aby powiedzieć "Lokalny numer jest wymagany". W tym przykładzie po prostu przesłaniałem wszystkie komunikaty o błędach za pomocą "Wprowadź poprawny numer telefonu".
<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"
}
},
Ten kod wyświetli jeden typowy błąd, jeśli którekolwiek z wymaganych pól jest puste.
<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>
podobne do Chrisa
$("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);
}
});
fajne, dzięki człowieku! –
z mvc 3, jak napisać ten adapter jquery.validaet? – dfang
Dziękuję ... To zadziałało dla mnie –
to dla części 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>
Jest to skrypt użyłem:
$(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
},
},
});
});
cała część HTML może dostosuj się, jak chcesz. Użyłem tego złożonego układu, ponieważ musiałem dodać to pole do już istniejącego formularza. Ale to jest przykład, który działa! Mam nadzieję, że to pomoże każdemu!
Pomyślałem, że powinienem się tym podzielić. Pełny kod, który działał dla mnie.
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;
});
Użyłem tego kodu i działa dobrze dla sprawdzania dat .. ale kiedy wybieram dzień, to nie sprawdza, czy miesiąc lub rok są wybrane, to po prostu przekazuje walidację. Masz pojęcie, co to może być? – Limon
My się na to żeby zmienić jQuery validator do sprawdzania czegokolwiek z atrybutem validateable na nim, jak również standardowych wejść. Można uzyskać 1.9.0 zmodyfikowaną wersję wtyczki here
Zasadniczo importować nowy jquery walidatora i zrobić coś takiego:
<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>
Modyfikacje wymagane na jQuery validator miały uczynić go używać .attr('name') zamiast .name ponieważ .name działa tylko w polach formularza. I zmodyfikuj klucze do obsługi w górę itp., Aby powiązać elementy potomne elementu validateable.
To jest trochę bardziej dynamiczna niż grupy, ponieważ umożliwia walidację pól względem siebie, a nie tylko pojedyncze obiekty.
Myślę, że ten błąd pojawia się, nawet jeśli jest błąd formatu lub coś innego, – Starx