CODEWITHSUNDEEP
jqueryjquery-validate
Randy Tang
Randy Tang

Reputation: 4353

jQuery validation: some of the required field not filled but the form can still be submitted

I used jquery validation (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) for form validation. The followings are some fragments of my code:

HTML:

<form id="formID" action="/processForm" method="post">
  ...
  <input id="name" type="text" name="name" size="10" />
  <input id="username" type="text" name="username" size="10" />
  ...
<input type="submit" value="Submit" />

jQuery:

$("#formID").validate({
  onkeyup:false,

  rules: {
    name: {required: true},
    username: {required: true, checkUsername: true}
    ...
  },
  messages: {
    name: {required: "Must fill"},
    username: {required: "Must fill", checkUsername: "Username unavailable"},
    ...
  }

});

// Check if username exists
$.validator.addMethod('checkUsername', function(username) {
  var postURL = "/checkUsername";
  $.ajax({
    ...
  });
  return ...;
}, '');


// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

Something odd is that I can leave some of the required fields blank or unchecked, and the form can still be submitted. Some required fields can prevent from submitting if left blank, but others don't. Did anybody encounter the same strange problem? Or did I do anything wrong here?

BTW, if I click the submit button without filling anything, all required fields show error messages correctly. But some of them just won't prevent the form from been submitted. Please help.

EDIT: The Ajax form submission function at the bottom doesn't seem to work. How do I correct it?

Upvotes: 0

Views: 4610

Answers (3)

Christian
Christian

Reputation: 799

I had the same problem, what I did is:
1) change the the submit button :
from :

<input type="submit" class="savebutton" id="save" value="Save" />

to

 <input type="button" class="savebutton" id="save" value="Save" />  

(the save button is not going to submit the form when is click it).

2)change my validation script to:

<script type="text/javascript">
 $(document).ready(function() {
   $('#form').validate({ 
     rules: {
         qty: {
    max: 100,
            required: true
         }
    },
    messages: {
        qty: "please check quantity",
    }
});

 $( "#save" ).click(function() {
if ($('#form').validate())$('#form').submit();
 });
});
</script>

when the "save" button is hit, it validates the form. if the validation is correct, then it's going to submit the form.

Upvotes: 1

Randy Tang
Randy Tang

Reputation: 4353

Summing up, in order to employ both form validation and ajax submission, add 'submitHandler' to the validate() function:

$("#formID").validate({
  onkeyup:false,

  rules: {
    ...
  },

  messages: {
    ...
  },

  // Submit the form
  submitHandler: function(form) {
    theUrl = '/processData';
    var params = $(form).serialize();
    $.ajax ({
      type: "POST",
      url: theUrl,
      data: params,
      processData: false,
      async: false,
      success: function(returnData) {
        $('#content').html(returnData);
      }
    });
  }

});

Upvotes: 1

Ryley
Ryley

Reputation: 21226

Instead of:

// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

Use the submitHandler option of the Validate plugin, like this:

$("#formID").validate({
    //all your other options
    submitHandler: function(form) {
      $(form).ajaxForm({
        success: function(returnData) {
          $('#content').html(returnData);
        }
      });
    }
 });

Upvotes: 0

Related Questions