2017-05-17 5 views
0

Hier ist der Code:Warum funktioniert der JavaScript "req" Validator nicht?

<script language="JavaScript"> 
 
    var frmvalidator = new Validator("contactform"); 
 
    frmvalidator.addValidation("name","required","Please provide your name"); 
 
    frmvalidator.addValidation("email","required","Please provide your email"); 
 
    frmvalidator.addValidation("email","email", 
 
    "Please enter a valid email address"); 
 
</script> 
 

 
<form method="post" name="contactform" action="contact-form-handler.php"> 
 
\t <div class="row uniform 50%"> 
 
\t \t <div class="6u 12u(mobilep)"> 
 
\t \t <input type="text" name="name" id="name" placeholder="Name" /> 
 
\t \t </div> 
 
\t \t <div class="6u 12u(mobilep)"> 
 
\t \t \t <input type="email" name="email" id="Wemail" placeholder="Email" /> 
 
\t </div> 
 
\t </div> 
 
    <div class="row uniform 50%"> 
 
\t \t <div class="12u"> 
 
\t \t <input type="text" name="subject" id="subject" placeholder="Subject" /> 
 
\t </div> 
 
\t </div> 
 
\t <div class="row uniform 50%"> 
 
\t \t <div class="12u"> 
 
\t \t \t <textarea name="message" id="message" placeholder="Enter your message" rows="6"> 
 
     </textarea> 
 
\t </div> 
 
\t </div> 
 
\t <div class="row uniform"> 
 
\t \t <div class="12u"> 
 
\t \t \t <ul class="actions align-center"> 
 
\t \t \t <li><input type="submit" value="Send Message" /></li> 
 
\t \t </ul> 
 
\t </div> 
 
    </div> 
 
</form>

Hier ist die Konsole Fehler:

{ 
    "message": "Uncaught ReferenceError: Validator is not defined", 
    "filename": "https://stacksnippets.net/js", 
    "lineno": 12, 
    "colno": 27 
} 

Die "E-Mail" Validator Funktionen wie hier zu sehen: Screenshot of JS validation

Aber
, das "Erforderliche" ist gültig Atoren arbeiten nicht. Ich habe ursprünglich "req" versucht, aber das hat auch nicht funktioniert. Ich dachte, die doppelten ID- und Namenswerte könnten fehlerhaft sein, aber ich habe sie vergeblich geändert. Ich bin verwirrt, warum der JS den erforderlichen Validator nicht anwenden wird. Was muss ich ändern, damit diese Validierung funktioniert?

Bearbeiten: Ich habe this Tutorial als Leitfaden verwendet. Das Validator-Objekt befindet sich in einer herunterladbaren JS-Datei.
Glücklicherweise haben mich die Kommentare und vorherigen Antworten in die richtige Richtung geführt. Siehe die genaue Antwort unten.

+0

Bitte teilen Sie uns mit, welche Bibliothek Sie für die Validierung verwenden. Es gibt kein integriertes JavaScript-Objekt 'Validator'. –

+0

Ich machte mir keine Gedanken über Bibliotheken (hätte ich sein sollen), weil ich einem Tutorial folgte.Danke, dass Sie mir mehr Aufmerksamkeit schenken! – PujitM

Antwort

0

Also der Fehler, den ich machte, war ziemlich einfach.
Anstatt das Skript gen_validatorv4.js in den Header der HTML-Datei zu schreiben, platzierte ich es am Ende des Elements <body>, direkt vor </body>.

Aus irgendeinem Grund (ich bin mir nicht ganz sicher, warum - ein Kommentar, der dies erklären würde, wäre genial), das Skript in der Kopfzeile fixiert den Fehler behoben.

Lösung: Platzieren Sie das Validierungsskript in der Kopfzeile des HTML, nicht am Ende des Textkörpers.

Danke, SO!

+0

Es ist, weil alles, was in der Kopfzeile ist kompiliert und vor DOMReady Ereignis ausgeführt. Für Skripte in der ist es später kompiliert. Es ist Es ist auch eine gute Praxis, das meiste Javascript (alles, was nicht entscheidend ist) am Ende des Dokuments zu platzieren, damit der Benutzer den Inhalt schneller hat (es müssen nicht alle js heruntergeladen werden, bevor der Inhalt gerendert wird). – sznowicki

0

Ich bin mir nicht sicher, was Sie versuchen, aber Validor scheint nicht ein vanilla.js Objekt zu sein.

Wenn Sie versuchen, native html5 Formularüberprüfung zu verwenden, müssen Sie nur korrekte Attribute zu einem Formularelemente hinzufügen.

Für E-Mail-Eingang wird es sein: <input type="email" required="required" .../>

Dieser dem Browser mitteilen, wird dieses Feld als E-Mail zu überprüfen und dieses Feld ist obligatorisch.

Nicht alle Browser unterstützen dies (meistens einige wirklich alte), aber Sie brauchen trotzdem eine Server-Validierung, so dass es heutzutage eine gute Idee ist, nichts Brauchbares in Javascript zu implementieren.

Wenn Sie es brauchen, finden Sie einige Javascript-Formular-Bibliotheken auf Github. Es gibt viele von ihnen.

Oder erstellen Sie eine selbst mit onchange Ereignisse oder `` `onsubmit`` für die gesamte Formularvalidierung.

p.s. <script language="JavaScript"> Sprache ist veraltet, geben Sie auch ein. ist gut genug.

+0

das war hilfreich! – PujitM

+0

@PujitM dann folgen Sie bitte der SO-Etikette und upvote die Antwort, die Sie hilfreich finden oder markieren Sie es als die "Antwort", wenn es Ihre Frage beantwortet. – sznowicki

+0

Ich uploated, bevor ich kommentierte - ich habe einfach nicht genug rep für es zu zeigen :( – PujitM

Verwandte Themen