Form Validation nicht richtig funktioniert, läuft ohne Überprüfung Einträge

Question

Der Code in Javascript hier ist:

<script type="text/javascript"> 

function validateForm() 
{ 
    var firstname=document.getElementById("firstname").value; 
    var tel=document.getElementById("tel").value; 
    var textarea=document.getElementById("textarea").value 
    var email1=document.getElementById("email1").value; 
    var email2=document.getElementById("email2").value; 

if(validate_req(firstname,tel,textarea,email1,email2)==true&& 
validate_name(firstname)==true&& 
isnumeric(tel)==true&& 
isAlpha(prof)==true&& 
validate_email(email1)==true&& 
validate_email(email2)==true&& 
equal_emails(email1,email2)==true) 
return true; 
else 
return false;} 

function validate_req(firstname, tel,textarea,email1,email2) 
{ if(firstname==null || firstname==" ") 
    {alert("Please enter your first name"); 
    return false; 
    } 
if(tel==null || tel==" ") 
    {alert("Please enter your telephone"); 
    return false; 
    } 
if(email1==null || email1==" ") 
    {alert("Please enter your email"); 
    return false; 
    } 
if(email2==null || email2==" ") 
    {alert("Please repeat your email"); 
    return false; 
    } 
if(textarea==null || textarea==" ") 
    {alert("Please enter your message"); 
    return false; 
    } 
    return true; 
} 

function validate_name(firstname){ 
    if(firstname.length>20){ 
     alert("Name is longer than 20 characters"); 
     return false; 
    } 
    return true; 
} 
function isNumeric(tel) 
    var numberpattern = /^(-0+[0-9]{2}-)[0-9]{3}-[0-9]{4}$/; 

    if(numberPattern.test(tel)==false){ 
     alert("Please enter correct telephone number"); 
     return false; 
    } 
    else return true; 
    } 
function validate_email(email1){ 
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
    if(emailPattern.test(email1)==false{ 
     alert("Please check your email"); 
     return false; 
    } 
    else return true; 
} 
function equal_emails(email1,email2){ 
    if(email1!=email2){ 
     alert("Email are not the same"); 
     return false; 
     } 
     return true; 
} 
</script>  

Der Code für das Formular hier:

<form action="confirm.html" method="post" onSubmit="return validateForm();"> 
<table width="50%" border="3" cellspacing="3%" cellpadding="3%" id="table1"> 
<tbody> 
<tr> 
    <th colspan="2" style="text-align: center" scope="col" >Contact Us by Filling Out The Form</th> 
    </tr> 
<tr> 
    <td colspan="2">Required field*</td> 
    </tr> 
<tr> 
    <td width="44%"><label for="firstname">Name:*</label></td> 
    <td width="56%"><input name="firstname" type="text" id="firstname" maxlength="20"></td> 
</tr> 
<tr> 
    <td><label for="address">Address:</label></td> 
    <td><input type="text" name="address" id="address"></td> 
</tr> 
<tr> 
    <td><label for="email1">Email:*</label></td> 
    <td><input type="email" name="email1" id="email1"></td> 
</tr> 
<tr> 
    <td><label for="email2">Retype your Email:*</label></td> 
    <td><input type="email" name="email2" id="email2"></td> 
</tr> 
<tr> 
    <td>Are you a member of our website?</td> 
    <td><p> 
    <label> 
     <input type="radio" name="RadioGroup1" value="Member" id="RadioGroup1_0"> 
     Member 
    </label> 
    <br> 
    <label> 
     <input type="radio" name="RadioGroup1" value="Non-member" id="RadioGroup1_1"> 
     Non-member 
    </label> 
    <br> 
    </p></td> 
</tr> 
<tr> 
    <td><label for="tel">Telephone number:*</label></td> 
    <td><input type="tel" name="tel" id="tel"></td> 
</tr> 
<tr> 
    <td><label for="textarea">Queries/ Comments:*</label></td> 
    <td><textarea name="textarea" id="textarea"></textarea></td> 
</tr> 
<tr> 
    <td colspan="2"><input type="submit" name="submit" id="submit" value="Submit"></td> 
    </tr> 
</tbody> 
</table> 
</form> 

Nach Absenden-Button drücken, das Formular weiter zu confirm.html ohne die Einträge zu überprüfen. Ich kann sie leer lassen, ich kann Briefe in Vornamefeld schreiben und es fährt fort, Seite zu bestätigen. Ich bin mir nicht sicher, warum das so ist, also habe ich beschlossen, euch zu fragen.

Answer 1

Ihr Code ist fein, abgesehen von ein paar fehlerhafte Fehler/Probleme mit Groß-/Kleinschreibung.

Zum Beispiel:

if(validate_req(firstname,tel,textarea,email1,email2)==true&& 
    validate_name(firstname)==true&& 
    isnumeric(tel)==true <----- isnumeric() doesn't exist, but isNumeric() does. 

Ich habe diese Fehler für Sie gereinigt. Die folgende JS ist syntaktisch korrekt:

function validateForm() 
{ 
    var firstname=document.getElementById("firstname").value; 
    var tel=document.getElementById("tel").value; 
    var textarea=document.getElementById("textarea").value 
    var email1=document.getElementById("email1").value; 
    var email2=document.getElementById("email2").value; 

if(validate_req(firstname,tel,textarea,email1,email2)==true&& 
validate_name(firstname)==true&& 
isNumeric(tel)==true&& 
isAlpha(prof)==true&& 
validate_email(email1)==true&& 
validate_email(email2)==true&& 
equal_emails(email1,email2)==true) 
return true; 
else 
return false;} 

function validate_req(firstname, tel,textarea,email1,email2) 
{ if(firstname==null || firstname==" ") 
    {alert("Please enter your first name"); 
    return false; 
    } 
if(tel==null || tel==" ") 
    {alert("Please enter your telephone"); 
    return false; 
    } 
if(email1==null || email1==" ") 
    {alert("Please enter your email"); 
    return false; 
    } 
if(email2==null || email2==" ") 
    {alert("Please repeat your email"); 
    return false; 
    } 
if(textarea==null || textarea==" ") 
    {alert("Please enter your message"); 
    return false; 
    } 
    return true; 
} 

function validate_name(firstname){ 
    if(firstname.length>20){ 
     alert("Name is longer than 20 characters"); 
     return false; 
    } 
    return true; 
} 
function isNumeric(tel) { 
    var numberPattern = /^(-0+[0-9]{2}-)[0-9]{3}-[0-9]{4}$/; 

    if(numberPattern.test(tel)==false){ 
     alert("Please enter correct telephone number"); 
     return false; 
    } 
    else return true; 
} 
function validate_email(email1) { 
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
    if(emailPattern.test(email1)==false){ 
     alert("Please check your email"); 
     return false; 
    } 
    else return true; 
} 
function equal_emails(email1,email2){ 
    if(email1!=email2){ 
     alert("Email are not the same"); 
     return false; 
     } 
     return true; 
} 

Answer 2

Der Fehler scheint zuerst mit der if-Bedingung zu sein. Ihre Schecks sind falsch.

if(firstname==null || firstname==" ") 
    {alert("Please enter your first name"); 
    return false; 
    } 

Sie können diese Ähnlich

if (firstname) { 
    if (firstname.trim().length === 0) { 
     alert("Please enter your first name"); 
     return false; 
    } 
} else { 
    alert("Please enter your first name"); 
    return false; 
} 

ändern müssen Sie auch das gleiche für andere, wenn die Bedingungen zu tun. Sie haben auch einen Platz in der if-Bedingung firstname==null || firstname==" "

Fix diese und der Code sollte nur gut laufen. Außerdem wäre es besser, den Code korrekt einzurücken, da dies die Lesbarkeit beeinträchtigt und das Debugging erleichtert. Prost

Answer 3

Pseudo
$(button).on(click, function submitForm(){ if(form==valid){ ..... } }