Jquery Überprüfen Sie den Speicherort der benutzerdefinierten Fehlermeldung
Lesezeit: 7 Minuten
Erfolg lernen
Das sieht sehr einfach aus, aber ich kann es nicht herausfinden. Ich verwende das JQuery Validate Plugin. Ich versuche zu validieren <input name=first> und <input name=second> um die Fehlermeldungen auszugeben in:
Ich würde eine kleine Änderung im Code vorschlagen $(placement).append(error) … hier, wenn die Validierung mehrfach ausgelöst wird (Eg: multiple submit button click) dann wird der Fehler auch mehrfach angehängt. Also ich finde es besser zu haben html Anstatt von append … $(placement).html(error)
– Rajshekar Reddy
6. Januar 2018 um 10:58 Uhr
In derselben Funktion können Sie einfach zusätzliche Bedingungen erstellen, die den von Ihnen gewünschten Feldern entsprechen. Verwenden Sie zum Beispiel Ihren obigen Code …
$(document).ready(function () {
$('#form').validate({
errorPlacement: function(error, element) {
//Custom position: first name
if (element.attr("name") == "first" ) {
$("#errNm1").text(error);
}
//Custom position: second name
else if (element.attr("name") == "second" ) {
$("#errNm2").text(error);
}
// Default position: if no match is met (other fields)
else {
error.append($('.errorTxt span'));
}
},
rules
});
Ich hoffe, das hilft!
das hat bei mir fast funktioniert. Das einzige Problem, das ich habe, ist die ‘else’-Bedingung. Wie ändern Sie es, um die Standardvalidierungsplatzierung auszuführen?
– Alex M
19. Oktober 2016 um 16:31 Uhr
Dies funktioniert, aber betrachten Sie stattdessen Aruns Lösung mit Datenattributen, damit Sie dies im Markup angeben können und der errorPlacement-Funktion nicht für jede Eingabe eine neue Bedingung hinzufügen müssen, was nicht sehr DRY ist.
– Kyle
10. August 2017 um 15:59 Uhr
if (e.attr("name") == "firstName" ) {
$("#firstName__validate").text($(error).text());
console.log($(error).html());
}
Probieren Sie diesen Text des Fehlerobjekts aus
HTML
<form ... id ="GoogleMapsApiKeyForm">
...
<input name="GoogleMapsAPIKey" type="text" class="form-control" placeholder="Enter Google maps API key" />
....
<span class="text-danger" id="GoogleMapsAPIKey-errorMsg"></span>'
...
<button type="submit" class="btn btn-primary">Save</button>
</form>
Javascript
$(function () {
$("#GoogleMapsApiKeyForm").validate({
rules: {
GoogleMapsAPIKey: {
required: true
}
},
messages: {
GoogleMapsAPIKey: 'Google maps api key is required',
},
errorPlacement: function (error, element) {
if (element.attr("name") == "GoogleMapsAPIKey")
$("#GoogleMapsAPIKey-errorMsg").html(error);
},
submitHandler: function (form) {
// form.submit(); //if you need Ajax submit follow for rest of code below
}
});
//If you want to use ajax
$("#GoogleMapsApiKeyForm").submit(function (e) {
e.preventDefault();
if (!$("#GoogleMapsApiKeyForm").valid())
return;
//Put your ajax call here
});
});
JQUERY FORM VALIDATION BENUTZERDEFINIERTE FEHLERMELDUNG
Eigentlich ist error ein Array, das Fehlermeldungen und andere Werte für Elemente enthält, die wir übergeben, Sie können console.log(error); und sehen. Innerhalb der if-Bedingung “error.appendTo($(element).parents(‘div’).find($(‘.errorEmail’)));” Ist nichts anderes, als das HTML-Element im Code zu finden und die Fehlermeldung zu übergeben.
$("form[name="contactUs"]").validate({
rules: {
message: 'required',
name: "required",
phone_number: {
required: true,
minlength: 10,
maxlength: 10,
number: false
},
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message",
phone_number: "Please enter a valid mobile number"
},
errorPlacement: function(error, element) {
$("#errorText").empty();
if(error[0].htmlFor == 'name')
{
error.appendTo($(element).parents('div').find($('.errorName')));
}
if(error[0].htmlFor == 'email')
{
error.appendTo($(element).parents('div').find($('.errorEmail')));
}
if(error[0].htmlFor == 'phone_number')
{
error.appendTo($(element).parents('div').find($('.errorMobile')));
}
if(error[0].htmlFor == 'message')
{
error.appendTo($(element).parents('div').find($('.errorMessage')));
}
}
});
Aftab Ahmed
Fügen Sie einfach ein leeres Label-Tag mit derselben ID wie das Eingabefeld + “-error” hinzu, zum Beispiel.