Validate HTML form input with JavaScript

Question

Possible Duplicate:
Validate email address in Javascript?

I have an HTML form that uses PHP/MySQL to post to a database. In the email section of the form, I want the user to be displayed an error message if he or she types in an email address that is not in valid email address format. I am modeling off of a code like this, but I cannot get it work.

Note that whenever I hit the submit button on the form, the form submits, and the PHP action works fine. The problem is I can enter anything I like in the form and it will pass fine. I would like for it to display the error message "Not a valid email address". I understand I can validate via PHP too, but I would like to validate on the client side as well.

Can anyone assist?

    <script type="text/javascript">
function validateEmail()
{
var x=document.forms["test"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
alert("Not a valid e-mail address");
return false;
 }
 }
  </script>


  <form name"test" action="roads.php" onsubmit="return validateEmail();" method="post">

  <input type="text" name="email" placeholder="Enter your e-mail" />

   <input type="submit" value="Show Me!" />

   </form>

"but I cannot get it work" is not good explanation of problem. Please consider putting more details on your problems with the code. — Alexei Levenkov, Aug 21 '12 at 05:01
I updated the problem to be more detailed. Sorry for the lack of description. — user1613223, Aug 21 '12 at 05:10

score 1 · Accepted Answer · answered Aug 21 '12 at 05:11

1

you are missing a = in html, which doesn't make to form name test..and javascript can't find the form of name test, and throws error...check console log for javascript errors..

<form name"test" action="roads.php" onsubmit="return validateEmail();" method="post">

<form name="test" action="roads.php" onsubmit="return validateEmail();" method="post">

Working code

answered Aug 21 '12 at 05:11

Rajat Singhal

11,234
5
38
56

Even simpler is to have `return validateEmail(this)` and use `function validateEmail(theForm) { var x=theForm.email.value;` – mplungjan Aug 21 '12 at 05:18

score 0 · Answer 2 · answered Aug 21 '12 at 05:23

Here is a better way to access the form and its fields - also remember to return true

Assuming <form id="testform" action="roads.php" method="post">

we can use unobtrusive scripting

<script>
window.onload=function() {
  document.getElementById("testform").onsubmit=function () {
    var email=this.email.value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
      alert("Not a valid e-mail address");
      return false;
    }
    return true;
  }
}
</script>

Validate HTML form input with JavaScript

2 Answers2