I need a way to submit a form only if email is valid. If email is NOT valid then show ONLY an alert ( below you can see my code ).

JAVASCRIPT:

 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);
 } 


 function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
    // ok
    }else{ alert("email not valid"); return false;}
 }

HTML:

<form method="post" action="register.php" enctype="multipart/form-data">
<table>
<tr><td>Email:</td></tr>
<tr><td><input type="text" size="30" name="email" id="emailfield"> </td></tr>
<tr><td>Password:</td></tr>
<tr><td><input type="password" size="30" name="password"> </td></tr>
</table>
<input name="steptwo" value="Create Account" type="submit" onclick="continueornot();"/>
</form>

The problem is that the form is submitted even if the email is NOT valid.

How can I resolve this problem ?

I need a way to submit a form only if email is valid. If email is NOT valid then show ONLY an alert ( below you can see my code ).

JAVASCRIPT:

 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);
 } 


 function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
    // ok
    }else{ alert("email not valid"); return false;}
 }

HTML:

<form method="post" action="register.php" enctype="multipart/form-data">
<table>
<tr><td>Email:</td></tr>
<tr><td><input type="text" size="30" name="email" id="emailfield"> </td></tr>
<tr><td>Password:</td></tr>
<tr><td><input type="password" size="30" name="password"> </td></tr>
</table>
<input name="steptwo" value="Create Account" type="submit" onclick="continueornot();"/>
</form>

The problem is that the form is submitted even if the email is NOT valid.

How can I resolve this problem ?

• javascript

7 Answers 7

You should attach return continueornot(); to the onsubmit event of the form, not the button's click event.

See this fiddle: http://jsfiddle.net/NdSmu/

You need the return value.

function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
      // ok
      return true;
    }else{ alert("email not valid"); return false;}
 }


onclick="return continueornot();"

<form method="post" action="register.php" enctype="multipart/form-data" onsubmit=" return continueornot();">

The cleanest way to achieve this is to use the HTML5 pattern attribute as well as javascript:

<input id="emailField" type="email" pattern="emailRegexHere">

Browser support varies for this attribute, however it will improve.

The following markup should achieve your alert also:

<form method="post" action="register.php" enctype="multipart/form-data" onsubmit="return continueornot();">

In my opinion alerts are not the way to go here - they give a terrible user experience. Have a look at some javascript validation libraries that will display any errors in a more user friendly manner.

function continueornot() {
    if(validateEmail(document.getElementById('emailfield').value)){
    return true;
    }else{ alert("email not valid"); return false;}
 }

you can simply use regular expression validator to validate the field of email instead of javascript function

Is the return true; the only thing you've added? You don't need to return true to submit, you just need to not return false, though the problem the OP is having is that it is submitting despite returning false. (Because any return value is getting ignored in this case because the inline event attribute doesn't use it.) –