Form email validation not working properly

Question

I have a form that I'm trying to validate, but the email, select country fields seems that are not being validated. Can some one tell me what is the problem?

Here is my javascript:

<script type="text/javascript">
function validateEmail()
{

   var emailID = document.form1.EMail.value;
   atpos = emailID.indexOf("@");
   dotpos = emailID.lastIndexOf(".");
   if (atpos < 1 || ( dotpos - atpos < 2 )) 
   {
       alert("Please enter correct email ID")
       document.form1.EMail.focus() ;
       return false;
   }
   return( true );
}

function validate()
{
//username password First_n Last_n Company Mobile Email Residence



   if( document.form1.First_n.value == "" )
   {
     alert( "Please enter your first name!" );
     document.form1.First_n.focus() ;
     return false;
   }
   if( document.form1.Last_n.value == "" )
   {
     alert( "Please enter your last name!" );
     document.form1.Last_n.focus() ;
     return false;
   }
   if( document.form1.username.value == "" )
   {
     alert( "Please enter your username!" );
     document.form1.username.focus() ;
     return false;
   }

   if( document.form1.password.value == "" )
   {
     alert( "Please enter your password!" );
     document.form1.password.focus() ;
     return false;
   }
   if( document.form1.Company.value == "" )
   {
     alert( "Please provide us your company name!" );
     document.form1.Company.focus() ;
     return false;
   }
   if( document.form1.Mobile.value == "" )
   {
     alert( "Please provide us your mobile number!" );
     document.form1.Mobile.focus() ;
     return false;
   }
   if( document.form1.Email.value == "" )
   {
     alert( "Please provide us your Email!" );
     document.form1.Email.focus() ;
     return false;
   }
   if( document.form1.Email.value != "" )
   {
     // Put extra check for data format
     var ret = validateEmail();
     if( ret == false )
     {
          return false;
     }else 
          return true;
   }
   if( document.form1.Zip.value == "" ||
           isNaN( document.form1.Zip.value ) ||
           document.form1.Zip.value.length != 5 )
   {
     alert( "Please provide a zip in the format #####." );
     document.form1.Zip.focus() ;
     return false;
   }
   if( document.form1.Residence.value == "-1" )
   {
     alert( "Please provide your country!" );
     return false;
   }
   return( true );
}
</script>

And my form html:

<form name="form1" method="post" action="add_new.php" onsubmit="return(validate());">
<div style="clear:both;padding:0px 10px 0 10px;margin-bottom:20px;">
<h5>Interested in</h5>
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Hosting</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio"
><label for="toggle-off" class="btn">Email accounts</label>
</div> 
<div style="clear-both;">
<input name="First_n" type="text" placeholder="First Name" class="login-text-lbl-pink-no-width" id="First_n">     
<input name="Last_n" type="text" placeholder="Last Name" class="login-text-lbl-pink-no-width" id="Last_n">              
</div>
<input name="username" type="text" placeholder="Username" class="login-text-lbl-pink-no-width" id="username"><br/>
<input name="password" type="password" placeholder="Password" class="login-text-lbl-pink-no-width" id="password"><br/>
<input name="Company" type="text" placeholder="Company" class="login-text-lbl-pink-odd" id="Company">              <br/>
<input name="Mobile" type="text" placeholder="Mobile Phone" id="login-text-lbl" class="pink-transparent-item" id="Mobile">              <br/>
<input name="Email" type="text"  placeholder="Email" class="login-text-lbl-pink-odd" class="pink-transparent-item" id="Email">              <br/>
<select name="Residence" id="Residence" id="login-text-lbl" style="
background-color: rgba(240, 96, 96, 0.62);
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 30px;
margin: 5px;
font-style: italic;
width: 90%;
padding: 5px;
color: #34584b;
float: none;"
>
<option value="-1" selected>[choose country]</option>
<option value="US">America</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="HK">Hong Kong</option><br/>
<input name="domain" class="pink-transparent-item" type="text"  placeholder="Existing domain" id="login-text-lbl" id="domain">              <br/>

<input type="submit" name="Submit" value="Submit" style='font-family: "Neo Sans Light", Verdana, Tahoma;' class="login-button-pink">
</form>

Answer 1

there's a few things wrong here, but let's try and answer your questions specifically -

Email works fine for me in chrome and firefox, though can't speak for safari, IE, seamonkey, etc.

Your validateEmail() method has the input named as EMail - you won't get it. JS is Case-sensitive.

Even after you do validate, you'll never get to anything past Email because of the return true you have after bringing back the value of validateEmail(). you've left validate() at that point.

As for the other things - you should really run your code through JSLint to check it for errors. I see a couple unclosed braces. I say JSLint because it seems you're a relative beginner at JS, so you probably need the more fundamentalist approach that Crockford brings to code, at least for a little while until you get good at it (no offense intended; we all start at the beginning).

Answer 2

you form has email id as : "Email" while your validation code has EMail (var emailID = document.form1.EMail.value;)? Use correct control id.

And yes of course you can use regex to validate which is even better.

Answer 3

You can actually use the regular expression method form Fuzzley's answer , for the country field part try using this code,

var country= document.form1.Residence.value ;
if(country != "America"|| country != "Germany"||country != "Italy"||country != "Hong Kong") {
            alert("Please provide your country!");
            return false;
        }

Answer 4

Do couple of things :

1) Put alert statements in your "validate()" and "validateEmail()" functions and make sure you're receiving all the values you expect.

2) If you're using IE, try to load your application in either Chrome or FireFox and go through the built-in debuggers setting up breakpoints in your JS functions.

Answer 5

It would probably a lot easier to just use regex for email validation. Check out this StackExchange answer for a good example.

Code snippet from the answer:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\
".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}