Wie Client Seite Echtzeit Validierung eines Formulars mit Select, Radio, Checkbox, Text, Dateieingabe, einfach Javascript verwenden?

Question

Ich habe eine Benutzerkonfigurationsseite mit vielen Eingaben eines Formulars. Ich möchte die Eingabe in Echtzeit validieren, um Formatfehler zu vermeiden, wenn der Benutzer die Texteingabe eingibt, den Dateinamen überprüft und einige Informationen eingibt, wenn der Benutzer die Auswahl, Radio, Checkbox eingibt. Ich möchte nur mit der Methode shuold wissen, die ich für jeden Typ der oben genannten Eingabe verwenden.

Answer 1

Sie müssen eine Logik schreiben, die die Validierung für Sie durchführt. Sobald Sie es geschrieben haben, können Sie keyup Ereignis von jquery verwenden, das diese Funktion aufrufen wird, sobald Sie etwas eingeben.

Zum Beispiel wird das folgende Schnipsel in Echtzeit Validierungen durchführen, sobald Sie mit der Eingabe beginnen. Wenn der eingegebene Text nur aus Alphabeten besteht, gibt es keinen Fehler (und falls vorhanden, wird er verschwinden) und sobald Sie eine Zahl eingegeben haben, wird ein Fehler angezeigt.

$("#only-text").on("keyup", function() { 
 
    realTimeValidate(); 
 
}); 
 

 
function realTimeValidate() { 
 
    var inputField = document.getElementById("only-text").value; 
 
    
 
    if(!isAlphaOrParen(inputField)) 
 
     document.getElementById("showerror").innerHTML = "Please enter only numbers"; 
 
    else 
 
     document.getElementById("showerror").innerHTML = ""; 
 
} 
 
     
 
function isAlphaOrParen(str) { 
 
    return /^[a-zA-Z()]+$/.test(str); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Type only Text (error will be generated if you type a number) : <br><input id="only-text" type="text"/><br> 
 
<span id="showerror" style="color:red"></span>