Validation in Jquery ajax form submission

Question

I am trying to validate user to enter a unique mobile number and email id. It is checking and showing result mobile/email exist or not but if it exists still the form is submitting. Since I am new to jQuery validation I am not able to figure out how I should do it correctly nor can I find a perfect tutorial to do it in a right way.

Here is my code, I know lots of mistakes would be there and I apologize for those small mistakes.

On my form I have given On blur function to check mobile number and email

From these two functions I am checking in database if exist or not

function check_availability() {
  //get the mobile number  
  var main = $('#main').val();

  //use ajax to run the check  
  $.post("tutor/check_mobile", {
      main: main
    },
    function(result) {
      //if the result is 1  
      if (result == 1) {
        //show that the username is available 
        $('#mobile_availability_result').html(' ');
      } else {
        //show that the username is NOT available  
        $('#mobile_availability_result').html('Mobile Number already registered ');
      }
    });

}

function email_availability() {
    //get the email

    var main = $('#email_tuitor').val();
    //$email = urldecode("[email]") 


    //use ajax to run the check  
    $.post("<?php echo base_url(); ?>tutor/check_email", {
        main: main
      },
      function(result) {
        //if the result is 1  
        if (result == 1) {
          //show that the username is available 
          $('#email_availability_result').html(' ');
        } else {
          //show that the username is NOT available  
          $('#email_availability_result').html('Email already registered ');
        }
      });
  }

This is the jquery ajax form submission is it possible to do every validation on blur ?

$(document).ready(function() {
  $('.error').hide();
  $("#next_tutor").click(function() {
    $('.error').hide();
    var main = $("#main").val();
    if (main == "") {
      $("label#main_error").show();
      $("input#main").focus();
      return false;
    }
    var name = $("#name").val();
    if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
    var email_tuitor = $("#email_tuitor").val();
    if (email_tuitor == "") {
      $("label#email_tuitor_error").show();
      $("input#email_tuitor").focus();
      return false;
    }
    var password_tuitor = $("#password_tuitor").val();
    if (password_tuitor == "") {
      $("label#password_tuitor_error").show();
      $("input#password_tuitor").focus();
      return false;
    }

    var tutor = $("#tutor").val();
    //  Returns successful data submission message when the entered information is stored in database.
    var dataString = 'main=' + main + '&name=' + name + '&email_tuitor=' + email_tuitor + '&password_tuitor=' + password_tuitor + '&tutor=' + tutor;
    // AJAX Code To Submit Form.
    //alert(dataString);
    //die;
    $.ajax({
      type: "POST",
      url: "<?php echo base_url(); ?>tutor/tutor_sub_ses",
      data: dataString,
      cache: false,
      success: function(result) {
        //alert(result);
        $("#abc").hide();
        $("#tutorreg2").slideToggle("slow").show();
      }
    });
    return false;
  });
});

<form class="form-horizontal" action="#">
  <div class="form-group">
    <div class="col-sm-8 text-center">
      <h2 class="text-warning">Tutor Registration</h2>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" value="tutor" style="display:none" id="tutor">
      <input type="text" class="form-control" id="name" placeholder="Name">
      <label id="name_error" class="error" for="name"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" class="form-control phone" id="main" placeholder="Mobile Number *This will be the key to your account*" onBlur="check_availability()">
      <span id="mobile_availability_result"></span>
      <label id="main_error" class="error" for="main"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" class="form-control" id="email_tuitor" placeholder="Email" onBlur="email_availability()">
      <span id="email_availability_result"></span>
      <label id="email_tuitor_error" class="error" for="email_tuitor"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="password" class="form-control" id="password_tuitor" placeholder="Password">
      <label id="password_tuitor_error" class="error" for="password_tuitor"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8 text-right">
      <button type="submit" class="btn btn-warning" id="next_tutor">Next</button>
    </div>
  </div>
</form>

What does your code do and how does it differ from what you want it to do? Are there any errors in the developer tools console? — Jaromanda X
– Jaromanda X, Commented Feb 14, 2016 at 6:15
No errors are there basically it is checking on blur if mobile number / email exist or not , if mobile number exist it should stop and dont allow user to submit form but here the form is submitting , so i want to validate form should not be submitted if mobile/email exist in my db . @JaromandaX — Sumit Nair
– Sumit Nair, Commented Feb 14, 2016 at 6:19
It is very difficult to help you with so much code you have provided. Try to create a fiddle/plunker to pin point your issue and we can help. — ashfaq.p
– ashfaq.p, Commented Feb 14, 2016 at 6:34
i just want to know how can i use onblur function to check from database if email/mobile number exist or not how can i write in in jquery ajax form submission ? @ashfaq.p — Sumit Nair
– Sumit Nair, Commented Feb 14, 2016 at 6:40

Nikolay Ermakov · Accepted Answer · 2016-02-14 07:14:03Z

2

The quick way will be to use a global switch to enable sending the form. I would to it this way:

Create global variables with default values

var mobileApproved = false, emailApproved = false;

Check status and prevent sending if value is false in click handler

$(document).ready(function() {

    ...


    $("#next_tutor").click(function() {

        if (!mobileApproved || !emailApproved) {
            return false;
        }
        ...
    })

    ...

})

In your check functions manage approved status after each ajax response

...
$.post("tutor/check_mobile", {
    main: main
},
function(result) {
    //if the result is 1  
    if (result == 1) {
        //show that the username is available 
        $('#mobile_availability_result').html(' ');
        mobileApproved = true;
    } else {
        //show that the username is NOT available  
        $('#mobile_availability_result').html('Mobile Number already registered ');
        mobileApproved = false;
    }
});

...
$.post("<?php echo base_url(); ?>tutor/check_email", {
    main: main
},
function(result) {
    //if the result is 1  
    if (result == 1) {
        //show that the username is available 
        $('#email_availability_result').html(' ');
        emailApproved = true;
    } else {
        //show that the username is NOT available  
        $('#email_availability_result').html('Email already registered ');
        emailApproved = false;
    }
});

edited Feb 14, 2016 at 7:14

answered Feb 14, 2016 at 7:03

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nikolay Ermakov Over a year ago

Just made it a bit shorter

Sumit Nair Over a year ago

i am trying to implement it

Nikolay Ermakov Over a year ago

Sorry, a correction needed to if (!mobileApproved || !emailApproved) {. I updated the answer

Sumit Nair Over a year ago

super super super super woooohuu you did it bro today i learned new thing just because of you :) thanks a ton bro

ashfaq.p · Accepted Answer · 2016-02-14 07:06:54Z

1

In order to stop the form from submission. You can keep a flag lets say formvalid.

Keep formValid as false initially. Based on your blur function, make it true if email and mobile are available else keep it false. In your form submission, put an if condition to check , if formvalid is true or not. If true then process with form submission else stop and throw error.

answered Feb 14, 2016 at 7:06

ashfaq.p

5,49723 silver badges36 bronze badges

1 Comment

Sumit Nair Over a year ago

you are also perfectly right bro nikolay also explained me this thing

Collectives™ on Stack Overflow

Validation in Jquery ajax form submission

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related