2016-05-08 19 views
2

Ich habe ein Formular in HTML erstellt und Onblur-Ereignis für jedes Feld verwenden, und es funktioniert sehr gut. Das Problem ist, wenn ich auf Senden Schaltfläche (die Daten an ein Servlet sendet) die Daten gesendet werden, selbst wenn es ungültig ist. Hier ist ein Beispiel.Überprüfen Sie alle Formulardaten vor dem Senden

<html> 
<head> 
<script> 
function check() 
{ 
    if(checkName()==true) 
     return true; 
    else{ 
     alert('vhvh'); 
     return false; 
    } 
} 
function checkName() 
{ 
    var uname=document.enq.Name.value; 
    var letters = /^[A-Za-z, ]+$/; 
    if(uname.match(letters)) 
    { 
     document.getElementById('Name').style.borderColor = "black"; 
     return true; 
    } 
    else 
    { 
     document.getElementById('Name').style.borderColor = "red"; 
     //alert('Username must have alphabet characters only'); 
     //uname.focus(); 
     return false; 
    } 
} 
</script> 
</head> 
<body> 
<form name="enq" method="post" action="Enquiry" onsubmit="check()"> 
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br> 
<input class="button" type="submit"> 
</form> 
</body> 
</html> 

Wie kann ich dieses Problem beheben?

Antwort

0

Es gibt ein "onsubmit" -Ereignis, mit dem Sie die Formularübertragung steuern können. Verwenden Sie es, um Ihre Validierungsfunktionen aufzurufen, und entscheiden Sie erst dann, ob Sie dem Benutzer das Senden des Formulars erlauben möchten. http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

Sie haben es in der folgenden Art und Weise zu verwenden, wenn Sie es das Formular Vorlage verhindern wollen:

<form onsubmit="return check()"> 
+0

danke @Ni. Jetzt habe ich eine Funktion erstellt, die prüft, ob die Daten gültig sind oder nicht und es funktioniert ziemlich gut. Aber immer noch, wie ich es beschränken kann, Daten an Servlet zu senden. Hier ist der Code meiner neuen Methode. Funktionskontrolle() { \t if (Checkname() == true && checkNumber() == true && validateEmail() == true) \t \t alert ('true'); \t sonst \t \t alert ('false'); } –

+0

@ParveenKumar Wenn die Funktion false zurückgibt, wird das Formular nicht übergeben. –

+0

@ParveenKumar Ich habe den Link in meiner Antwort auf eine bessere Website geändert –

0

Verwendung

<input class="button" type="button">

und legte ein Onclick Ereignis wie folgt:

<input class="button" type="button" onclick="this.submit()">

so können Sie die Daten manipulieren, bevor Sie es subimit.

Verwandte Themen