i have problem in javascript email validation

Question

hi......, i have problem in javascript email validation, I wrote code something like,

//emp.php

    <form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2" >
<table>
<tr valign="baseline">
      <td nowrap="nowrap" align="right">Desired Email-ID:</td>
      <td><input type="text" name="emp_email" value="" size="32" onsubmit="checkMail()";/></td>
    </tr>
<tr valign="baseline">
      <td nowrap="nowrap" align="right">&nbsp;</td>
      <td><input type="submit" value="Insert record" onclick="checkMail();"/></td>
    </tr>
  </table>
</form>

//java scrit code for checkMail()

<script language="javascript">

function checkMail() {
  var email=document.getElementById('emp_email').value;
var mail = email.value;

        var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]­{1}[a-z0-9]+)*[\.]{1}(com|ca|net|org|fr|us|qc.ca|gouv.qc.ca)$', 'i');



        if(!reg.test(mail) || mail == "")

        {

          alert("Your email address isn't valid!");

          return false;

        }

        else {

            alert("Email address is okay, let's send the form!");    

        }

      }

      </script>

Plz help me thanks in advance

Answer 1

The problem is that there is no element with id

emp_email.

Your element has name emp_email. Add an id attribute to the text box.

<input type="text" name="emp_email" value="" size="32" onsubmit="checkMail()";/>

change it to

<input type="text" name="emp_email" id="emp_email" value="" size="32" onsubmit="checkMail()";/>

Edit: To put javascript validation on submit button change

<input type="submit" value="Insert record" onclick="checkMail();"/>

to

<input type="submit" value="Insert record" onClick="return checkMail();" />

and remove the onsubmit event from the email textbox.

Answer 2

Try moving the javascript function call off the submit button and onto an onblur event on the email field itself.

Answer 3

phoenix has the basic error right. But:

<td><input type="submit" value="Insert record" onclick="checkMail();"/></td>

Don't put form validation on a submit onclick. It may be possible to submit the form without clicking the submit button (depending on the browser and number of fields and buttons in the form). Always put it on the form itself:

<form ... onsubmit="return checkMail();">

also:

var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]­{1}[a-z0-9]+)*[\.]{1}(com|ca|net|org|fr|us|qc.ca|gouv.qc.ca)$', 'i');

That's a really bad idea, like most ad-hoc “e-mail validation” regexes it will reject many completely valid e-mail addresses. Your rules for what usernames and TLDs are allowed are particularly, pointlessly, restrictive.

See this infamous regex for how to actually validate e-mail addresses. Then cry, give up, and just do basic checks instead. (Is there an ‘@’ in it? is there a ‘.’ in it? are there no spaces? well fine then.)

(Even the page-long-horror-regex can't cope with non-ASCII e-email addresses via IDN, which it would be nice to support.)