Email Validation in Javascript Before AJAX

Question

So I got this js code for a form submission, and everything is working fine, however, I don't know where and what to write in the code so the email gets a validation check. What and where should I write to validation check the email?

$(document).ready(function() {
  $("#submit").click(function() {

    var name = $("#fullname2").val();
    var email = $("#fullemail2").val();
    var state = $("#selectstate").val();
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'FullName=' + name + '&email=' + email + '&SovereignState=' + state;
    if (name == '' || email == '' || state == '') {
      $('#required_fields').show();
    } else {
      // AJAX Code To Submit Form.
      $.ajax({
        type: "POST",
        url: "demo.php",
        data: dataString,
        cache: false,
        success: function(phpSays) {
          if (phpSays == "OK") {
            $('#email_error').show();
            $('#required_fields').hide();
          } else {
            $('#sinatra2').hide();
            $('#thanks').fadeIn(1000);
            $('#spreading_message').delay(1800).fadeIn(1500);
            $('#by_social').delay(3000).fadeIn(1500);
            $('#email_error').hide();
            $('#required_fields').hide();
          }
        }
      });
    }
    return false;
  });
});

possible duplicate http://stackoverflow.com/questions/2855865/jquery-regex-validation-of-e-mail-address — Muhammad Usman, Sep 23 '15 at 04:09
possible duplicate of [Validate email address in JavaScript?](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript) — Elias Nicolas, Sep 23 '15 at 04:26

score 2 · Accepted Answer · answered Sep 23 '15 at 04:16

2

Looking at your code I can suggest the below approach to say where you can do email validation

if(name==''||email==''||state=='')
{
   $('#required_fields').show();
}//this is fine
else if(!valid(email))//call a function which validates email and returns true or false
{
    //Display the message either with same $('#required_fields') changing the text or 
    //Add one more field to display invalid email message
}
else
{
    //Your ajax call here
}

Now your valid function will look like

function valid(email)
{
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test(email); //this will either return true or false based on validation
}

answered Sep 23 '15 at 04:16

Guruprasad J Rao

29,410
14
101
200

Thanks, but could you explain little more of the function? Do I need to write an if statement (if 'true)? – Chris Sep 23 '15 at 04:50
1

Never mind, I just realised that it works perfectly, thanks! – Chris Sep 23 '15 at 04:54
No.. `emailReg.test` does the validation for you.. Anytime.. Happy coding.. :) – Guruprasad J Rao Sep 23 '15 at 04:56

score 1 · Answer 2 · answered Sep 23 '15 at 04:10

 $(document).ready(function(){
 $("#submit").click(function(){

 var name = $("#fullname2").val();
 var email = $("#fullemail2").val();
 var state = $("#selectstate").val();
 // Returns successful data submission message when the entered information is stored in database.
 var dataString = 'FullName='+ name + '&email='+ email + '&SovereignState='+ state;
 if(name==''||email==''||state=='')
 {
 $('#required_fields').show();
 }
 else
 {
 // AJAX Code To Submit Form.
   // <-- email address should be here
   ...........    
 }
 return false;
 });
 });

score 1 · Answer 3 · answered Sep 23 '15 at 04:13

1

Better place to validate is where you have 'fullemail2' input field. Even in the javascript file, you should do it before create the dataString. In that way you could validate before submit.

answered Sep 23 '15 at 04:13

Email Validation in Javascript Before AJAX

3 Answers3