CODEWITHSUNDEEP
javascriptjqueryajaxformsvalidation
Chris
Chris

Reputation: 21

Email Validation in Javascript Before AJAX

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

Upvotes: 0

Views: 1612

Answers (3)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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
}

Upvotes: 2

user2645381
user2645381

Reputation:

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.

Upvotes: 1

The KNVB
The KNVB

Reputation: 3844

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

Upvotes: 1

Related Questions