jQuery禁用按钮（不提交），直到字段验证+验证插件

我有4个按钮在我的表单上，提交，取消，添加和删除按钮。所有的都按预期工作，但我想禁用添加按钮，直到输入字段验证。我使用验证插件，我认为这可以通过回调进行必要的验证，但我不确定。jQuery禁用按钮（不提交），直到字段验证+验证插件

难道有人指着我正确的方向吗？

UPDATE：

下面是一些代码

required: function(element) { 
    return($('#chargeamtaddButton').attr('disabled', ? '','disabled'); 
}

寻找那真/假选项标志设置禁用属性的想法

来源

2009-05-19 Phill Pafford

菲尔，你到底来解决这一问题？你能提供你的最终解决方案吗？ – Blair 2010-12-16 04:15:37

@blairyeah - 查看Michael Irgoyen的答案 – ripper234 2012-03-07 12:20:21

-2

我以前使用过验证插件，但我不记得所有的细节。我敢肯定这件事情是这样的：

$(function() { 
    $('#myForm').validate(
     rules: { 
      'elementToWatch': { 
       success: function(element) { 
        if($("#myform").validate().element("#myselect")) { 
         $('#chargeamtaddButton:disabled').removeAttr('disabled'); 
        } else { 
         $('#chargeamtaddButton').attr('disabled','disabled'); 
        } 
       }, 
       // etc... 
      }, 
      // etc... 
     }, 
     // etc... 
    }); 
});

既然有使用验证插件这么多的方法，这是很难给你完美的建议，但我希望我已经展示给你一个更好的主意如何前进。也许如果你提供了更多的代码和HTML，我可以帮助你更多。

来源

2009-05-19 17:35:16 KyleFarris

jQuery Validate Plugin Documentation: Form Method

的上述方法验证插件允许您检查表单是否有效。所以，如果你不能让回调工作，那么我会运行一个计时器，并检查表单是否每隔一段时间都有效，如果是的话启用按钮。虽然这很糟糕。

我无法找到验证插件的成功回调，所以我认为你使用submitHandler方法卡住了。但是，您还没有准备好提交表单，因为您仍然想要添加字段。所以我建议的解决方案是始终启用添加按钮，但在点击时让它调用一个函数来查看表单是否有效。如果是这样，然后添加您的领域或什么，如果没有，然后弹出错误。所以：

<body onload="formValidator = $('#form').validate();"> 
... 
<input value='add' name='add' onclick='addIsValid();'> 
... 
<script type='text/javascript' language='javascript'> 
function addIsValid() { 
    if(formValidator.numberOfInvalids() > 0) { 
      formValidator.showErrors(); 
     } else { 
      addElementToFormOrWhatever(); 
     } 
    } 
</script>

或至少是这样的效果。祝你好运！

来源

2009-05-19 12:56:44 hornairs

这是否在document.ready或outside之外？ – 2009-05-19 13:04:02

这里是验证插件的回调 http://docs.jquery.com/Plugins/Validation/Methods/required – 2009-05-19 13:07:04

我已经发现了最好的方法来做到这一点，它使用插件中的未公开方法checkForm()。

将此代码添加到表单所在页面上的$(document).ready()函数。

$('#yourform').bind('change keyup', function() { 
    if($(this).validate().checkForm()) { 
     $('#submitbutton').removeClass('button_disabled').attr('disabled', false); 
    } else { 
     $('#submitbutton').addClass('button_disabled').attr('disabled', true); 
    } 
});

在这种情况下，它会将类button_disabled添加到按钮，然后添加disabled属性。您可以通过CSS将禁用的样式应用于该按钮。

来源

2011-05-20 13:57:15

一个更优雅且快速的解决方案是简单地替代默认的点击和上KEYUP事件添加代码，你需要如下的而不是添加另一个听的事件

$("#form").validate({ 
    submitHandler: function(form) { 
     form.submit(); 
    }, 
    onkeyup: function(element, event) { 
     if (event.which === 9 && this.elementValue(element) === "") { 
      return; 
     } else if (element.name in this.submitted || element === this.lastElement) { 
      this.element(element); 
     } 

     if (this.checkForm()) { // checks form for validity 
      $('a.submit').attr('class', 'submit btn btn-success');  // enables button 
     } else { 
      $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button 
     } 
    }, 
    onclick: function(element) { 
     // click on selects, radiobuttons and checkboxes 
     if (element.name in this.submitted) { 
      this.element(element); 

     // or option elements, check parent select in that case 
     } else if (element.parentNode.name in this.submitted) { 
      this.element(element.parentNode); 
     } 

     if (this.checkForm()) { // checks form for validity 
      $('a.submit').attr('class', 'submit btn btn-success');  // enables button 
     } else { 
      $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button 
     } 
    } 
})

随着下面的CSS代码提交触发 - 最初禁用（引导3班）：

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>

这可以很容易地与jQuery插件areYouSure使用，只启用提交时实际更改：

if (this.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity

初始化插件使用无声：

$('#form').areYouSure({'silent':true});

来源

2014-06-05 00:15:24 user3709159

jQuery禁用按钮（不提交），直到字段验证+验证插件

回答

相关问题