在使用 jQuery 验证字段之前禁用表单提交

Question

我已修改此脚本http://jsfiddle.net/mblase75/xtPhk/1/ 以提交表单。 目标是在验证所有表单字段之前禁用提交按钮。 这第一次工作得很好，但是因为我的表单没有动作 jquery 也可以处理提交。

所以在我提交表单后，提交按钮不会被禁用。我必须刷新页面才能使其被禁用。

我想要做的是，在每篇文章之后......提交按钮应该被禁用，而不刷新页面。

这可能吗？

如果我的表单有一个操作页面，它确实有效。但我不想要那个

表单提交：

       $(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
  }

在验证所有字段之前禁用提交按钮

       $(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);
      });
    });

我正在使用 jquery 函数将我的值发布到数据库。我的表单没有操作。

http://jsfiddle.net/bC6GF/

这是 jsfiddle 页面，它显示了我的问题。

Answer 1

提交后为什么不禁用按钮？

你已经有了提交功能：

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;
}

通过调用提交按钮来禁用它：

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;
}

这应该在每次提交后禁用按钮。

不相关但您可能想要研究的是 jQuery JavaScript Style Guides 并清理您的一些代码。