Search code examples
javascripthtmlxhtmlemail-validation

Email verfication html and javascript

below is my code mainly for "Email Validation" but for some reason its not working properly i have no idea why , so do you mind taking a look please. thanks

I guess the main problem is with that line document.getElementById("custEmail").onchange = chkEmail; for some reason chkEmail is a problem...and also the search part myEmail.value.search(+@[a-zA-Z_]+?.[a-zA-

    <html  xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Web Assignment 1 :Online shopping form</title>


<script type = "text/javascript">



      function chkEmail() {
        var myEmail = document.getElementById("custEmail");


        var pos = myEmail.value.search(+@[a-zA-Z_]+?.[a-zA-Z]{2,6});

        if (pos != 0) {
          alert("The email you entered (" + myEmail.value + 
                ") is not in the correct form. \n" +
                "The correct form is: " +
                "[email protected]\n" +
"Please fix it");
          myEmail.focus();
          myEmail.select();
          return false;
        } else
          return true;
      }


    </script>
</head>
<body>
<h1> Please fill in the information below </h1>

<form action="" 
>
<p>
<h2> Contact Info...</h2>
<pre>
     Last  Name     :  <input type="text" name="name2" size="20">
     Email          :  <input type="email" id = "custEmail" onchange ="chkEmail();" size="30">
     Mobile number  :  <input type="text" name="mob" size="15">
    </pre>
 <input type = "reset"  id = "reset" />
<input type = "submit"  id = "submit" />
  </p>

 </form>
 <script type = "text/javascript">
      <!--
// Set form element object properties to their 
// corresponding event handler functions

        document.getElementById("custEmail").onchange = chkEmail;
      // -->
    </script>
</body>
</html>
Solution

  • If you just want a client side validation, why don't you just simply validate using HTML regular expression as follows: If you just want a client side validation, why don't you just simply validate using HTML regular expression as follows:

    <form action="">
<p>
<h2> Contact Info...</h2>
<pre>
    Last  Name     :  <input type="text" name="name2" size="20">
    Email          :  <input type="email" id = "custEmail" size="30" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
    Mobile number  :  <input type="text" name="mob" size="15">
</pre>
<input type = "reset"  id = "reset" />
<input type = "submit"  id = "submit" />
</form>

    See fiddle here: http://jsfiddle.net/9gthN/