Validieren Sie Formularfelder mit Javascript

Question

Leute.

Ich hoffe, Sie sehen dies nicht als eine dumme Frage, weil ich neu in JavaScript bin. Ich habe meine Nachforschungen darüber angestellt, wie ich dieses Problem lösen kann, aber die Antworten, die ich auf dem Stack-Overflow gefunden habe, waren im Moment irgendwie zu hoch für mich. Und ich mag es auch nicht, Codes zu kopieren. Ich möchte es lernen. Mein JavaScript-Code funktionierte auf einem Feld, funktionierte aber nicht für alle Felder, selbst wenn ich eine Schleife machte.

Bitte, Sie sind frei, mir zu zeigen, wie man das professionell macht. Ich wäre dankbar, viele Ansätze oder Methoden zu sehen.

Gracias

---

function Validate(x){ 
 
    var required = document.getElementsByClassName("required"); 
 
    for(var x = 0; x > required.length; x++){ 
 
    if ((required[x].value == "") || (required[x].value == null)) { 
 
     required[x].style.backgroundColor = "red"; 
 
     required[x].style.color = "white"; 
 
    } else { 
 
     required[x].style.backgroundColor = ""; 
 
     required[x].style.color = "#777"; 
 
     } 
 
    } 
 
}

<form id="form1" name="form1" method="post" action=""> 
 
<p> 
 
<label for="textfield">Name</label><br /> 
 
    <input type="text" name="name" id="name" class="forme required" onblur="Validate(name)" /> 
 
    <br /> 
 

 
    <label for="textfield">Surname</label><br /> 
 
    <input type="text" name="surname" id="surname" class="forme required" /> 
 
    <br /> 
 

 
    <label for="textfield"> School</label><br /> 
 
    <input type="text" name="school" id="school" class="forme required" /> 
 
    <br /> 
 

 
    <label for="textfield">Mobile</label><br /> 
 
    <input type="text" name="mobile" id="mobile" class="forme required" /> 
 
    <br /> 
 

 
    <label for="email"> Email</label><br /> 
 
    <input type="text" name="email" id="email" class="forme required"/> 
 
    </p> 
 
    <p> 
 
    <input type="reset" name="reset" id="reset" value="Reset" /> 
 
    <input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" /> 
 
    </p> 
 
</form>

---

Seien Sie für ya Zeit dankbar.

Answer 1

Wie in den Kommentaren Ihrer Frage erwähnt, haben Sie das falsche Zeichen verwendet (">" ist falsch, "<" ist wahr). Aber Ihr Code weist einige weitere Fehler auf.

• Das for Attribut auf die label Elemente mit dem jeweiligen Eingabefeld sollte immer darauf hinweisen, so dass die ID des Eingabefeldes verwenden.

• Es ist besser, kann die JavaScript addEventListener Methode anstelle des DHTML verwenden Attribut onclick, aber das ist wohl Geschmackssache.

document.getElementById("submit").addEventListener("click", function(event){ 
 
    var req  = document.querySelectorAll("form input.required"), 
 
     error = false; 
 
     
 
    for(var i = 0; i < req.length; i++){ 
 
     if(req[i].value.trim() == ""){ 
 
      if(!error){ 
 
       error = true; 
 
      } 
 
      req[i].style.setProperty("color", "#ffffff"); 
 
      req[i].style.setProperty("background-color", "#ff0000"); 
 
     } else { 
 
      req[i].style.removeProperty("color"); 
 
      req[i].style.removeProperty("background-color"); 
 
     } 
 
    } 
 
    
 
    if(error){ 
 
     // Prevent Form Submit 
 
     event.preventDefault(); 
 
    } 
 
});

<form id="form1" name="form1" method="post" action=""> 
 
    <p> 
 
     <label for="name">Name</label><br /> 
 
     <input type="text" id="name" name="name" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="surname">Surame</label><br /> 
 
     <input type="text" id="surname" name="surname" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="school"> School</label><br /> 
 
     <input type="text" id="school" name="school" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="mobile">Mobile</label><br /> 
 
     <input type="tel" id="mobile" name="mobile" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <label for="email"> Email</label><br /> 
 
     <input type="email" id="email" name="email" class="forme required" /> 
 
    </p> 
 

 
    <p> 
 
     <input type="reset" id="reset" name="reset" value="Reset" /> 
 
     <input type="submit" id="submit" name="submit" value="Submit" /> 
 
    </p> 
 
</form>

Bitte beachten: Verwenden Sie NUR JavaScript nicht Ihre Formularfelder zu validieren. Sie sollten die übergebenen Benutzerinformationen immer auch auf der Serverseite überprüfen, da Sie den Benutzer nicht steuern können.

Viel Spaß beim Lernen JavaScript.

Mit freundlichen Grüßen
Sam.