JavaScript Form Validation XHTML

Question

Le script avec lequel je rencontre des problèmes est un validateur de formulaire. Je suis perplexe. J'ai compris que le problème est de faire avec ce bloc de code, qui fonctionne mais tout ce qui suit ce bloc ne fonctionnera pas. Si je supprime ce bloc, le script fonctionne. J'ai essayé d'ajouter d'autres instructions if pour tester différentes entrées pour null, mais elles ne fonctionnent pas non plus.

var atPos=email.indexOf("@"); 
var dotPos=email.lastIndexOf("."); 
if (atPos<1 || dotPos<atPos+2 || dotPos+2>=x.length) 
    { 
    alert("Please enter a valid email"); 
    return false; 
    } 

Le script entier:

<script type="text/javascript"> 
//<![CDATA[ 
function validateForm() 
{ 

    //Validate First Name 
    var fName=document.forms["orderForm"]["firstname"].value; 
    if (fName==null || fName=="") 
     { 
     alert("First name must be filled out"); 
     return false; 
     } 

    //Validate Last Name 
    var lName=document.forms["orderForm"]["lastname"].value; 
    if (lName==null || lName=="") 
     { 
     alert("Last name must be filled out"); 
     return false; 
     } 

    //Validate Email 
    var email=document.forms["orderForm"]["email"].value; 
    if (email==null || email=="") 
     { 
     alert("Email must be filled out"); 
     return false; 
     } 
    var atPos=email.indexOf("@"); 
    var dotPos=email.lastIndexOf("."); 
    if (atPos<1 || dotPos<atPos+2 || dotPos+2>=x.length) 
     { 
     alert("Please enter a valid email"); 
     return false; 
     } 

    //Validate Phone Number 
    var phone=document.forms["orderForm"]["phoneNumber"].value; 
    if (phone==null || phone=="") 
     { 
     alert("Phone Number must be filled out"); 
     return false; 
     } 
} 
//]]> 
</script> 

Et la forme:

<form action="index.html" id="orderForm" onsubmit="return validateForm()"> 

<table> 
    <tr> 
    <th>Item</th> 
    <th>Product Code</th> 
    <th>Diameter</th> 
    <th>Lengh</th> 
    <th>Colour</th> 
    <th>Unit Price</th> 
    <th>Quantity</th> 
    <th>Sub Total</th> 
    </tr> 
    <tr> 
    <td>Bolt</td> 
    <td>B113</td> 
    <td>9</td> 
    <td>50</td> 
    <td>Black</td> 
    <td>2.15</td> 
    <td><input type="text" name="quantityBolt" id="quantityBolt" /></td> 
    <td>#total</td> 
    </tr> 
    <tr> 
    <td>Nut</td> 
    <td>B234</td> 
    <td>5</td> 
    <td>N/A</td> 
    <td>Silver</td> 
    <td>0.45</td> 
    <td><input type="text" name="quantityNut" id="quantityNut" /></td> 
    <td>#total</td> 
    </tr> 
    <tr> 
    <td>Washer</td> 
    <td>W359</td> 
    <td>8</td> 
    <td>N/A</td> 
    <td>Silver</td> 
    <td>0.30</td> 
    <td><input type="text" name="quantityWasher" id="quantityWasher" /></td> 
    <td>#total</td> 
    </tr> 
</table> 

First name: <input type="text" name="firstname" /><br /> 
Last name: <input type="text" name="lastname" /><br /> 
Email: <input type="text" name="email" /><br /> 
Phone Number: <input type="text" name="phoneNumber" /><br /> 
Street Number: <input type="text" name="streetNumber" /><br /> 
Address: <input type="text" name="address" /><br /> 
State: <select name="state" > 
<option value="nsw">NSW</option> 
<option value="qld">QLD</option> 
<option value="vic">VIC</option> 
<option value="act">ACT</option> 
<option value="nt">NT</option> 
<option value="tas">TAS</option> 
<option value="sa">SA</option> 
<option value="wa">WA</option> 
</select><br /> 
Postcode: <input type="text" name="postcode" /><br /> 
Credit Card Number: <input type="text" name="creditNumber" /><br /> 
Credit Card Expiry: <input type="text" name="creditDate" /><br /> 
CSV Number: <input type="text" name="creditCSV" /><br /><br /> 

<br /> 
<input type="submit" value="submit" /> 
</form> 

Answer 1

L'erreur est ici:

if (atPos<1 || dotPos<atPos+2 || dotPos+2>=x.length) 

où la console d'erreur indique « x est non défini "

et le moteur Javascript a tendance à abandonner une erreur, donc il ne fera rien d'autre.