禁用表单提交，直到使用jQuery验证字段

Question

I have modified this script http://jsfiddle.net/mblase75/xtPhk/1/ to submit a form. The goal is to disable submit button until all form fields have been validated. This works fine the first time but since, my form does not have a action jquery handles the submit as well.

So after I submit the form, the submit button does not get disabled. I have to refresh the page in order for it to get disabled.

What I am trying to do is, after every post.. the submit button should get disabled, without refreshing the page.

Is this possible ?

It does work if my form has a action page. but I dont want that

Form Submit:

       $(document).ready(function() {
    $("#paForm").submit(sendForm)
    });

   function sendForm() {
      $.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){
    $("#result").html(data)
});// end of submit 
$( '#paForm' ).each(function(){
      this.reset(); // end of reset 
  });
return false
  }

Disable Submit Button until all fields have been validated

       $(document).ready(function() {
       $form = $('#paForm'); // cache
       $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
      $form.find(':input').change(function() { // monitor all inputs for changes
    var disable = false;
       $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
            disable = true; // disable submit if any of them are still blank
           }
        });
         $form.find(':input[type="submit"]').prop('disabled',disable);
      });
    });

I am using a jquery function to post my values to a database. My form does not have a action.

http://jsfiddle.net/bC6GF/

Here is the jsfiddle page, which shows my issue.

Answer 1

Why not disable the button after submit?

You already have the submission function in place:

function sendForm() {
 $.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){
  $("#result").html(data)
 });// end of submit 
 $( '#paForm' ).each(function(){
  this.reset(); // end of reset 
 });
 return false;
}

Extend with a call to the submit button to disable it:

function sendForm() {
 $.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){
  $("#result").html(data)
 });// end of submit 
 $( '#paForm' ).each(function(){
  this.reset(); // end of reset 
 });
 $("#paForm").find(':input[type="submit"]').prop('disabled', true); 
 return false;
}

That should disable the button after each submit.

Unrelated but something you may want to look into are the jQuery JavaScript Style Guides and cleanup some of your code.