Wie würde ich das JQuery Validate-Plugin verwenden, um eine Fehlermeldung für beispielsweise 3 Felder zu erhalten. Zum Beispiel 3 Doppelfelder. Standardmäßig erhalte ich 3 Fehlermeldungen, wenn alle 3 Felder leer bleiben. Ich möchte nur einen Fehler, der mit 3 Feldern verknüpft ist. Wenn irgendwelche leer sind, kommt der Fehler.
JQuery Validiert mehrere Felder mit einem Fehler
Ähnlich wie bei 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);
}
});
-
Wie schreibe ich mit mvc 3 diesen jquery.validaet-Adapter?
– dfang
14. Juni 2012 um 1:35 Uhr
-
@Jules, vielleicht kannst du mir helfen. Schau dir das an: stackoverflow.com/questions/47086843/…
– Erfolgsmann
3. November 2017 um 2:26 Uhr
Chris
Sie können die Gruppenoption verwenden, um Eingänge zu gruppieren. Wenn jeder der Eingänge eine Fehlermeldung hat, wird nur eine angezeigt.
Wahrscheinlich möchten Sie die mit den einzelnen Feldern verknüpften Meldungen überschreiben, damit sie sinnvoller sind. Beispielsweise erhalten Sie möglicherweise standardmäßig eine Fehlermeldung wie „Dieses Feld ist erforderlich“. Nun, das nützt dem Benutzer nicht viel, wenn es drei Eingänge gibt. Wahrscheinlich möchten Sie die Nachricht überschreiben, um zu sagen: “Die lokale Nummer ist erforderlich.” Für dieses 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"
}
},
Dies ist für den HTML-Teil:
<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, das ich verwendet habe:
$(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
},
},
});
});
Der gesamte HTML-Teil kann nach Belieben angepasst werden. 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 jemandem!
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;
});
matsondawson
Meine Meinung dazu war, sich zu ändern jQuery validator
um irgendetwas mit dem zu validieren validateable
Attribut darauf sowie die Standardeingaben. Sie können die bekommen 1.9.0
modifizierte Version des Plugins Hier
Grundsätzlich importieren Sie den neuen Jquery-Validator und gehen so vor:
<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 erforderlichen Modifikationen auf jQuery validator
waren, es zu verwenden .attr('name')
anstatt .name
da .name
funktioniert nur bei Formularfeldern. Und ändern Sie die Key-Up-Handler usw., um sie an Kinder von zu binden validateable
Element.
Dies ist etwas dynamischer als Gruppen, da es ermöglicht, dass Felder in Bezug zueinander und nicht nur als einzelne Entitäten validiert werden.
-
Das Modifizieren des JQuery-Validatorkerns ist immer eine schlechte Idee, stattdessen sollten Sie ein neues Plugin erstellen, mit dem Sie das Produkt unabhängig aktualisieren können
– kpull1
17. Juni 2019 um 11:10 Uhr
Süßigkeiten-BlingBling
Dieser Code zeigt einen häufigen 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>
-
Das Modifizieren des JQuery-Validatorkerns ist immer eine schlechte Idee, stattdessen sollten Sie ein neues Plugin erstellen, mit dem Sie das Produkt unabhängig aktualisieren können
– kpull1
17. Juni 2019 um 11:10 Uhr
Jarret Meyer
Ein paar Optionen: Schauen Sie sich die an errorContainer
. Sie können dafür sorgen, dass alle Fehler vollständig getrennt werden <div>
. Oder Sie schauen sich die an invalid
blockieren, und haben nur eine errorMessage.show()
Befehl.