Benutzerdefinierte Fehlermeldung laden, wenn jquery Validierung fehlschlägt

Question

Hallo Ich arbeite mit einer Anwendung, die bereits ein paar Validierungskriterien hat, und lädt versteckte divs, die für den Fehler spezifisch sind. Jetzt habe ich einige dynamische Zeilen, die ausgefüllt werden müssen, da ich nicht weiß, welcher Eingabetyp sie sein würden. Ich automatisiere den Prozess der Validierung mit dem jquery-Validierungs-Plugin.

Jetzt kann ich nicht verstehen, wie ich einen Block anzeigen könnte, wenn bestimmte erforderliche Element nicht gefüllt wurde. Derzeit würde ich eine Bedingung überprüfen, wie

  if(country.length == 0 && state == 'xx') 
      { 
       go = false; 
       document.getElementById('reqStateMsg').style.display = 'block'; 
      } 

Wie würde ich dies in jQuery-Methode validieren ?? Zur Zeit lade ich nur alle Elemente mit einer Klasse von erforderlich. Aber um die Fehlermethode anzuzeigen, muss ich auch "*" hinzufügen, die eine generische Methode laden würde, die von meinen dynamischen Eingabeelementen funktionieren würde, aber ich möchte meine benutzerdefinierten Fehler-Div-Blöcke für die statischen Eingabeelemente laden.

Jetzt ich nur die validate-Methode jetzt aufrufen, ich bin mir nicht sicher, wie würde ich laden die benutzerdefinierten Fehler divs von hier.

$('#FormInfo').validate(); 

Answer 1

du ein paar verschiedene Möglichkeiten tun konnte, zunächst können Sie die errorContainer Option von jQuery validate():

$("#form1").validate({ 
    errorLabelContainer: "#error-container-form1 ul", 
    wrapper: "li" 
}); 

Zusammen mit HTML wie folgt aus:

<form action="#" id="form1"> 
    <label for="Country">Country:</label> 
    <input name="Country" title="Country is required" id="Country" class="required"/> 
    <label for="State">State:</label> 
    <input name="State" title="Please enter a state" id="State" class="required"/> 
    <input type="submit" value="Submit" /> 
</form> 

Dies würde Ihre Notwendigkeit für eine spezielle <div> nur für Fehlermeldungen entfernen.

---

Wenn Sie jedoch einen <div> für Fehlermeldungen benötigen könnten Sie so etwas tun:

$("#form2").validate({ 
    invalidHandler: function(form, validator) { 
     if (!$("form#form2").validate().element("#State2")) { 
      $("div#error-container-form2").append($("div#state-error")); 
      $("div#state-error").show(); 
     } 
    } 
}); 

und die folgende HTML:

<form action="#" id="form2"> 
    <label for="Country2">Country:</label> 
    <input name="Country2" title="Country is required" id="Country2" class="required"/> 
    <label for="State2">State:</label> 
    <input name="State2" id="State2" class="required"/> 
    <input type="submit" value="Submit" /> 
</form> 
<div id="error-container-form2"></div> 

<div id="state-error" style="display:none">Please enter a State!</div> 

Beispiel: http://jsfiddle.net/JWTTZ/

jQuery validate ist ziemlich flexibel. Stellen Sie sicher, dass Sie die Dokumentation here lesen.

Answer 2

if($(".erroclass").size() > 0) { 
    $("#reqStateMsg").css("display", "block"); 
} 

Answer 3

Dies ist nicht sehr jQuery wie ...

Aber das ist:

$("#your-form-name").submit(function(){ 
if(country.length != 0 && state != 'xx') { 
    return true; 
} 
$("#reqStateMsg").fadeIn().fadeOut(5000); // slowly fadeout ;) 
return false; 
});