Javascript - email validation does not work

Question

I have the following HTML script with CSS and Javascript in it. I have a simple javascript function which should validate the email I have entered. But the javascript function does not get called at all. Can someone help ?

 function validateForm() { var x = document.getElementById("email").value; alert(x); 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; } } 

 <h1>DELIVERY DETAILS</h1> <form id="deliveryDetails"> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"><br> e-mail: <br> <input type="text" id="email"><br> telephone number:<br> <input type="text" name="telephone number"><br> order number:<br> <input type="text" name="order number"><br> order date:<br> <input type="text" name="order date"><br><br> <input type="submit" value="submit" onsumbmit="return validateForm();"> </form> 

Answer 1

The submit button does not have an onsubmit event, the form does, add the event to the form instead, and the code does get executed:

 function validateForm() { var x = document.getElementById("email").value; alert(x); 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; } } 

 <h1>DELIVERY DETAILS</h1> <form id="deliveryDetails" onsubmit="return validateForm();"> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"><br> e-mail: <br> <input type="text" id="email"><br> telephone number:<br> <input type="text" name="telephone number"><br> order number:<br> <input type="text" name="order number"><br> order date:<br> <input type="text" name="order date"><br><br> <input type="submit" value="submit" > </form> 

Answer 2

Definitely, I believe you can use HTML5 advantage, you can use input email type and use CSS for its validation:

<input class="email" type="email"/>

And put related CSS for valid or invalid :

.email:valid {
    color: green; //for example
}

.email:invalid {
    color: red; //for example
}

But in your case, I don't read your function, and I don't know why you do not use RegExp for check validation.

You can bind a click event to your submit button:

<input id="submit" type="submit" value="submit"/>

And for attaching click event:

document.getElementById('submit').addEventListener(`click`,() => {
    validateForm();
}, false);

Your validateForm is not optimized. you can write is like below:

const validForm = (emailString) => {
    return /^[a-z0-9][a-z0-9-_\.]+@([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(emailString);
}

Answer 3

onsumbmit="return validateForm();"

On sumbmit? You've invented a word there. In any case, that event won't fire the function, because onsumbmit isn't a valid event.

Also, put the event on the form (which 'owns' the event), not the button. ie

<form id="deliveryDetails" onsubmit="return validateForm();">

Answer 4

You can set the type to email without any extra validation code eg

<input type="email"  required/>

Or use regex

        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 validate() {
      var email = $("#email").val();

      if (validateEmail(email)) {

      }

$("#validate").bind("click", validate);

HTML

<form>
  <p>Enter an email address:</p>
  <input type="text" id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

Answer 5

Use the button type ="submit" & prevent the default behavior of the button using preventDefault

 function validateForm(e) { e.preventDefault(); var x = document.getElementById("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; } } 

 <h1>DELIVERY DETAILS</h1> <form id="deliveryDetails"> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"><br> e-mail: <br> <input type="text" id="email"><br> telephone number:<br> <input type="text" name="telephone number"><br> order number:<br> <input type="text" name="order number"><br> order date:<br> <input type="text" name="order date"><br><br> <button type="submit" onclick="validateForm(event)">Submit</button> </form>