Wie verwende ich das JQuery Validate-Plugin, um eine Fehlermeldung für sagen 3 Felder zu haben. Zum Beispiel 3 Dob-Felder. Standardmäßig bekomme ich 3 Fehlermeldungen, wenn alle 3 Felder leer sind. Ich möchte nur einen Fehler, der mit 3 Feldern verknüpft ist. Wenn irgendwelche leer sind, kommt der Fehler auf.JQuery Validieren mehrerer Felder mit einem Fehler
Ein paar Optionen: Überprüfen Sie die errorContainer. Sie können alle Fehler auf eine vollständig separate <div> gehen. Oder Sie können den invalid Block auschecken und haben nur einen errorMessage.show() Befehl.
Sie können die Gruppenoption verwenden, um Eingaben zu gruppieren. Wenn jede der Eingaben eine Fehlermeldung enthält, wird nur eine angezeigt.
Wahrscheinlich möchten Sie die Nachrichten, die mit den einzelnen Feldern verknüpft sind, überschreiben, damit sie sinnvoller sind. Zum Beispiel erhalten Sie möglicherweise eine Fehlermeldung wie "Dieses Feld ist erforderlich." Nun, das tut dem Benutzer nicht gut, wenn es drei Eingänge gibt. Wahrscheinlich möchten Sie die Nachricht überschreiben und sagen "Die lokale Nummer ist erforderlich". In diesem Beispiel habe ich einfach alle Fehlermeldungen mit "Bitte geben Sie eine gültige Telefonnummer ein" überschrieben.
<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"
}
},
Dieser Code zeigt einen allgemeinen Fehler an, wenn eines der erforderlichen Felder leer ist.
<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>
Ähnlich wie 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);
}
});
cool ist, danke Mann! –
mit mvc 3, wie schreibe ich diesen jquery.validaet Adapter? – dfang
Danke ... Es funktionierte für mich –
dies für den HTML-Teil ist:
<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>
Dies ist das Skript i verwendet:
$(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
},
},
});
});
alle HTML-Teil kann passen Sie an, wie Sie passend sehen. Ich habe dieses komplexe Layout verwendet, weil ich dieses Feld zu einem bereits vorhandenen Formular hinzufügen musste. Aber es ist ein Beispiel, das funktioniert! Hoffe es hilft jedem!
Ich dachte, ich sollte das teilen. Der vollständige Code, der für mich funktioniert hat.
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;
});
Ich habe diesen Code benutzt und funktioniert gut, um Daten zu überprüfen ..aber wenn ich Tag wähle, prüft es nicht, ob Monat oder Jahr vorgewählt werden, es übergibt gerade die Bestätigung. Irgendeine Idee was das sein könnte? – Limon
Mein nehmen auf, es war jQuery validator zu ändern, um alles mit dem validateable Attribut auf sie sowie die Standard-Eingänge zu validieren. Sie können die 1.9.0 modifizierte Version des Plug-ins erhalten here
Grundsätzlich Sie die neue jquery Validator importieren und etwas tun, wie folgt aus:
<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>
Die Modifikationen erforderlich auf jQuery validator waren es .attr('name') machen anstelle von .name weil .name funktioniert nur in Formularfeldern. Und ändern Sie die Schlüsselhandler usw., um sie an Kinder des Elements validateable zu binden.
Dies ist etwas dynamischer als Gruppen, da Felder in Relation zueinander und nicht nur als einzelne Entitäten validiert werden können.
Ich denke, dieser Fehler erscheint, selbst wenn es Formatfehler oder etwas anderes – Starx