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禁用按鈕（不提交），直到字段驗證+驗證插件

回答

相關問題