jQuery驗證插件，當表單有效時啓用提交按鈕

我的表單上的提交按鈕有一個啓用和禁用狀態。jQuery驗證插件，當表單有效時啓用提交按鈕

的條件如下：

如果所有輸入字段已輸入並有效啓用提交按鈕。

如果某些字段沒有被輸入，請不要啓用提交按鈕。

到目前爲止，驗證正在onkeyup事件內完成，只工作了第一個輸入：

//Custom onkeyup validation 
      onkeyup: function(element) { 
       //Check if input is empty remove valid class from parent 
       var formInput = $(element), 
        formInputParent = $(element).parent('fieldset'); 
       if(formInputParent.hasClass('form--valid') && formInput.val() === "") { 
        formInputParent.removeClass('form--valid'); 
       } 

       //Check if all fields are not empty to remove submit--disabled class 
       var formInputs = $('form').find(':input'); 
       console.log(formInputs); 

       formInputs.each(function(){ 
        if(formInputs.length > 0) { 
         formInputs.parents('form').find('.submit-form').removeClass('submit--disabled'); 
        } 
       }); 

      }

檢查這裏的DEMO

來源

2014-11-20 Filth

重複此：http://stackoverflow.com/a/21956309/594235 – Sparky 2014-11-20 21:50:23

您只需構造一個blur（或甚至是keyup）處理程序函數來根據窗體的有效性切換按鈕。使用插件的.valid()方法來測試表單。

$('input').on('blur', function() { 
    if ($("#myform").valid()) { 
     $('#submit').prop('disabled', false); 
    } else { 
     $('#submit').prop('disabled', 'disabled'); 
    } 
});

DEMO：http://jsfiddle.net/sd88wucL/

相反，你也可以使用都事件來觸發相同的處理函數...

$('input').on('blur keyup', function() { 
    if ($("#myform").valid()) { 
     $('#submit').prop('disabled', false); 
    } else { 
     $('#submit').prop('disabled', 'disabled'); 
    } 
});

DEMO 2：http://jsfiddle.net/sd88wucL/1/

來源：https://stackoverflow.com/a/21956309/594235

來源

2014-11-20 21:46:51 Sparky

謝謝Sparky。 – Filth 2014-11-20 22:02:50

Sparky，儘管這很棒 - 這種驗證會在您從一個輸入中「模糊」時觸發頁面上的所有表單域。您是否可以在每次輸入時驗證？ – Filth 2014-11-25 22:05:09

@Filth，是和不是。是的，你可以附上'。有效（）'到'onfocusout'處理程序中的各個字段。然而，爲了激活你的'submit'按鈕，你不能調用'.valid（）'來返回一個布爾值而不會調用錯誤消息......'.valid（）'同時執行兩個操作。沒有提供可以告訴你表單是否有效的方法，而不必在表單上激活驗證。 – Sparky 2014-11-25 22:11:05

$('form').find(':input').each(function(index, value){ 
    //action for every element 
    $(value); 
});

在這種情況下，你可以這樣做這樣:(但我不喜歡這個解決方案）

var areSomeFieldsEmpty = false; 
$('form').find(':input').each(function(i, v){ 
    if ($(v).val().length <= 0){ 
    areSomeFieldsEmpty = true; 
    } 
}); 

if (!areSomeFieldsEmpty){ 
    //unlock form 
}

http://jsfiddle.net/89y26/335/

來源

2014-11-20 20:49:10 Foxbond

這隻適用於一個輸入 - 不是全部。 – Filth 2014-11-20 20:53:49

你做錯了:)我添加了完整的解決方案 – Foxbond 2014-11-20 21:02:25

下面的代碼是什麼，我結束了迄今：

$('#formId').on('blur keyup change', 'input', function(event) { 
    validateForm('#formId'); 
}); 

function validateForm(id) { 
    var valid = $(id).validate().checkForm(); 
    if (valid) { 
     $('.form-save').prop('disabled', false); 
     $('.form-save').removeClass('isDisabled'); 
    } else { 
     $('.form-save').prop('disabled', 'disabled'); 
     $('.form-save').addClass('isDisabled'); 
    } 
} 

// Run once, so subsequent input will be show error message upon validation 
validateForm('#formId');

它採用checkForm()代替form()和我的禁用按鈕具有類form-save

它基於@Sparky's answer

有一個issue filed on the jquery-validation git repo。

來源

2017-08-28 09:37:01

jQuery驗證插件，當表單有效時啓用提交按鈕

回答

相關問題