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

Disable Form Submit until Fields have been validated using jQuery

本文关键字：jQuery 验证 字段 表单提交      更新时间：2023-09-26

我已修改此脚本 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页面，它显示了我的问题。

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

您已经具备了提交功能：

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风格指南，并清理一些代码。

相关文章：