CODEWITHSUNDEEP
javascriptjqueryajax
absolutskyy
absolutskyy

Reputation: 567

jquery validate email via ajax before submitting form also via ajax

I have a profile create form which has an email address field. I need to make sure that the email address entered by the user is in a valid format, and that it's also not already in use. For the format check, i have a simple client side validation performed by the isValidEmailAddress function which works well. For the other part where I need to check if the email address does not already exist, I do a jquery post to a controller method which returns a string "email address already in use" if the email is used by someone already..but in the code below the first "return false" is not stopping the form from submitting. Is this a jquery being asynchronous thing? 

  $(document).ready(function(){

    $("#new_profile").submit(function(){
      var email = $("#user_email").val();    
      if(isValidEmailAddress(email)){
        jQuery.post('/profiles/validate_email', {email: email}, function(data){
          if(data.match(/in use/)){
            $(".email-check-message").html(data);
            return false;
          }
        });
      }
      else{
        $(".email-check-message").html('please enter a valid email address');
        return false;
      }
    });    
  });

Also, the jquery post in the above function does not seem to be working..as in i don't see the server call happening in the server log. Anyone know what's going on? Thanks.

Upvotes: 0

Views: 2947

Answers (5)

Selda Vural
Selda Vural

Reputation: 46

just use this:

$(document).ready(function(){

  $("#new_profile").submit(function(event){
    var email = $("#user_email").val();    
    if(isValidEmailAddress(email)){
      jQuery.post('/profiles/validate_email', {email: email}, function(data){
        if(data.match(/in use/)){
          $(".email-check-message").html(data);
          event.preventDefault();
        }
      });
    }
    else{
      $(".email-check-message").html('please enter a valid email address');

    }
  });    
});

Upvotes: 2

Musa
Musa

Reputation: 97672

You have to unconditionally cancel the submit because the the submit handler will have finished executing before the ajax request returns(unless you set async to false), so you can't prevent an action that already occurred. You can set a flag to indicate whether or not the email is valid and then submit the form

$(document).ready(function(){
    $("#new_profile").submit(function(e){
        if (!$('#new_profile').data('validemail')){
            e.preventDefault();
            var email = $("#user_email").val();    
            if(isValidEmailAddress(email)){
                jQuery.post('/profiles/validate_email', {email: email}, function(data){
                    if(data.match(/in use/)){
                        $(".email-check-message").html(data);
                    }
                    else{
                        $('#new_profile').data('validemail', true).submit();
                    }
                });
            }
            else{
                $(".email-check-message").html('please enter a valid email address');
            }
        }
    });     
});

Upvotes: 0

guybennet
guybennet

Reputation: 683

can ı offer different solution.

first check mail with your function after send it to php,asp file to control is already in use.

$("#new_profile").submit(function(event){

  var email = $("#user_email").val();    
  if(isValidEmailAddress(email)){


        $.post(
                'control.php?do=mail',
                {mail:email},
                function(answer){

// do something with answer 

                }
          );

       });

} else{
        $(".email-check-message").html('please enter a valid email address');
        return false;
      }

Upvotes: 2

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

Try:

$(document).ready(function(){

  $("#new_profile").submit(function(event){
    var email = $("#user_email").val();    
    if(isValidEmailAddress(email)){
      jQuery.post('/profiles/validate_email', {email: email}, function(data){
        if(data.match(/in use/)){
          $(".email-check-message").html(data);
          event.preventDefault();
        }
      });
    }
    else{
      $(".email-check-message").html('please enter a valid email address');
      event.preventDefault();
    }
  });    
});

Upvotes: 0

Curious
Curious

Reputation: 2971

You can use

event.preventDefault()

to stop the form from being submitted, when your check for valid email fails or if the email is already in use.

Here is an example on how this works.

Upvotes: 0

Related Questions