0

I created a script that uses the jQuery validation plugin. My validation script works fine. But I would like to have my form be validated first before my Ajax call is made. Is there a way to integrate my Ajax call with the jQuery validation plugin?

Here's some info on the plugin

My script is here:

jQuery(document).ready(function($) {

  /* set no cache */
  $.ajaxSetup({ cache: false });


var $form = $("form"),
  $successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
  return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
$form.validate({
  rules: {
    firstname: {
      required: true,
      minlength: 2,
      letters: true
    },

    lastname: {
      required: true,
      minlength: 2,
      letters: true
    }

  },
  messages: {
    firstname: "Please specify your first name (only letters and spaces are allowed)",
    lastname: "Please specify your last name (only letters and spaces are allowed)"
  },
  submitHandler: function() {
    $successMsg.show();
  }
});

  $('#submitButton').click( function(e) {

      $.ajax({

          url: '/form/submit',
          type: 'post',
          dataType: 'json',
          data: $('#Form').serialize(),
          success: function(data) {
            // message



          },
          error: function(xhr, status, error){

          //message        

          } 

          // Prevent default form action

      });


  });



});

My html code is here:

<form id="Form">
    <input class="fname" id="firstname" name="firstname" type="text" />
    <input class="lname" id="lastname" name="lastname" type="text" />
    <button class="btn btn-default" id="submitButton" type="submit">Submit</button>
</form>
Sparky
  • 98,165
  • 25
  • 199
  • 285
Mariton
  • 601
  • 2
  • 12
  • 28
  • `e.preventDefault();` right under `$('#submitButton').click( function(e) {`. That removes the "normal behavior" of the submit button. You could also use `type="button"` instead of `type="submit"`... That would do the same. – Louys Patrice Bessette Dec 05 '17 at 22:45
  • Now, just by memory... I think `.validate()` adds a `valid` class to the form when valid... So add a condition to check if the form has this class before executing the ajax request. – Louys Patrice Bessette Dec 05 '17 at 22:49
  • 2
    @LouysPatriceBessette, no, absolutely none of that. The jQuery Validate plugin contains a `submitHandler` callback function which was designed precisely for the `ajax()` function. See: https://jqueryvalidation.org/validate/#submithandler – Sparky Dec 06 '17 at 01:59
  • 2
    You're creating new issues by using a `.click()` handler instead of the native `submitHandler` function provided by the plugin. Just move your `.ajax()` inside of the `submitHandler` and everything works nice. – Sparky Dec 06 '17 at 02:05
  • 1
    @Sparky: The best answer one can provide often is no answer ;) Thanks for your knowledgable comments. – Louys Patrice Bessette Dec 06 '17 at 02:10
  • @Sparky Thank you. This was the answer that I was looking for. – Mariton Dec 07 '17 at 14:35

0 Answers0