Wie zeige ich einen Fehler in einem Feld für einen benutzerdefinierten Formularvalidierer an?

Question

Ich habe bereits einen Formular-Validator in JS erstellt, von dem ein Teil unten angezeigt wird. Ich brauche nur Hilfe beim Anzeigen eines Fehlers und Scrollen zum Feld.

Okay, so dass jeder <input> werden Attribute haben die Validierung Angabe die sie benötigen, zB:

<input data-mandatory="yes" data-validation="phone" data-max-digits="10"> 

Es Attribute zum Zeitpunkt der Formularübermittlung analysiert werden, und wenn ich auf eine errornous Feld kommen muss ich Scrollen Sie zu diesem Feld und zeigen Sie einen Fehler in Englisch an (mehrsprachig wird nicht benötigt).

var $form = $('#main-form'); 
$form.submit(function(event) { 

    event.preventDefault(); 

    // per field 
    $form.find("input,textarea").each(function(f, field){ 

     // read metadata 
     var type = $(field).attr("type"); 
     var mandatory = $(field).data("mandatory"); 
     var maxDigits = $(field).data("max-digits")) || 1000; 
     var validation = $(field).data("validation"); 

     // read value 
     var value = $(field).value(); 

     // process mandatory textfields 
     if (type == "text" || type == "number"){ 
      var strValue = trim(value.toString()); 
      if (mandatory && strValue.length == 0){ 

       // HOW DO I SHOW AN ERROR AT THE CURRENT FIELD? 
       // and how do I scroll to it? 
      } 
     } 

    }); 
}); 

Edit: Ich habe eine nicht-triviale Menge an Code in node.js bekommt (5K LOC), die ich auf die Client-Seite bin Portierung, die von meiner Organisation erforderlich ist. Dieser Code wird oben nicht angezeigt.

Bearbeiten: Ich habe online für eine Stunde gesucht, aber die jQuery form validator Bibliotheken, die ich gesehen habe, funktionieren nicht die Art, die ich brauche. Ich habe bereits Formular-Hygiene & Validierungscode (der verschiedene Datentypen wie Telefonnummer, Postleitzahl, usw. unterstützt) in Node.js, die ich gerade auf die Clientseite portiere.

Answer 1

Zuerst würde ich empfehlen, einige kostenlose Validierung Plugin zu verwenden. Aber, wenn Sie aus irgendeinem Grund wollen, um es selbst zu schreiben, als die Antwort auf Ihre Frage ist:

Zuerst müssen Sie die Fehlermeldung irgendwo in Ihrem Markup versteckt haben. Es gibt eine Reihe von Möglichkeiten, dies zu tun. Gängigste Lösung wäre so etwas wie das sein:

<div> 
<input type="text" required /> 
<p class="error">Error</p> 
</div> 

als Sie es angezeigt werden müssen, in Ihrem Beispiel es, wie dies geschehen könnte:

// process mandatory textfields 
     if (type == "text" || type == "number"){ 
      var strValue = trim(value.toString()); 
      if (mandatory && strValue.length == 0){ 
       //show error 
       $(this).parent().find('.error').show(); 
       //scroll 
       $('html, body').animate({ 
        scrollTop: $(this).offset().top 
       }, 2000); 
       return; // stop validation(becouse you dont want to scroll more times) 

     } 
    } 

Sie müssen noch einige Dinge herauszufinden (like alle Fehler vor der erneuten Validierung), aber dies sollte Ihre Frage beantworten.