在使用parsleyjs驗證後啓用提交按鈕

Question

Parsley是否有一種簡單的方法來加載表單，其中禁用了「提交」按鈕並使其能夠滿足表單的所有驗證要求？

Answer 1

下面的代碼可以使用，它加載了一個表單禁用提交按鈕，使其在形式的某些驗證要求已得到滿足：

function formValidation(oEvent) { 
    oEvent = oEvent || window.event; 
    var txtField = oEvent.target || oEvent.srcElement; 
    var t1ck = true; //Enter Text Field ID/Name in place of 't1' 
    var msg = " "; 

    if(document.getElementById("t1").value.length < 3) { 
     t1ck = false; 
     msg = msg + "Text Entered should be minimun 3 char length"; 
    } 
    //Enter Text Field ID/Name in place of 't1' 

    if(document.getElementById("s1").value.length < 1) { 
     t1ck = false; 
     msg = msg + " Select one of the options"; 
    } 
    //Enter Select Field ID/Name in place of 's1' 

    if(t1ck) { 
     document.getElementById("btnSignUp").disabled = false; 
    } 
    //Enter submit button ID/Name in place of 'btnSignUp' 
    else{ 
     document.getElementById("btnSignUp").disabled = true; 
    } 
} 
function resetForm() { 
    document.getElementById("btnSignUp").disabled = true; 
    var frmMain = document.forms[0]; 
    frmMain.reset(); 
} 
window.onload = function() { 
    var btnSignUp = document.getElementById("btnSignUp"); 
    var btnReset = document.getElementById("btnReset"); //Enter reset button ID/Name in place of 'btnReset' 

    var t1 = document.getElementById("t1"); 
    var s1 = document.getElementById("s1"); 
    var t1ck = false; 

    document.getElementById("btnSignUp").disabled = true; 
    t1.onkeyup = formValidation; 
    s1.onclick = formValidation; 
    btnReset.onclick = resetForm; 
} 

Answer 2

我不知道你是什麼意思「容易」，但你的後續可以完成。

您需要listen to the eventsparsley:form:success和parsley:form:error來啓用/禁用按鈕。

您還需要監視每個表單字段的更改，以強制Parsley進行驗證。最後，一旦你點擊submit，歐芹就執行驗證。由於提交被禁用，您需要手動觸發驗證。

所以，這裏的工作示例（jsfiddle）：

<form> 
    <input type="text" name="field" data-parsley-required /> 
    <button type="submit" disabled>Submit</button> 
</form> 

<script> 
$(document).ready(function() { 
    // bind Parsley to the form 
    $("form").parsley(); 

    // Whenever parsley validates successfully, we enable the submit button 
    $.listen('parsley:form:success', function(ParsleyForm) { 
     ParsleyForm.$element.find('button').prop('disabled', false); 
    }); 

    // When a validation error occurs, we disable the submit button 
    $.listen('parsley:form:error', function(ParsleyForm) { 
     ParsleyForm.$element.find('button').prop('disabled', true); 
    }); 

    // We need to monitor all form fields and force Parsley's validation manually 
    // This will result in enabling or disabling the submit button 
    $("form :input").change(function() { 
     $(this).closest('form').parsley().validate(); 
    }); 
}); 
</script> 

請注意，你需要讓你監控所有字段（輸入，選擇，文本域等）的變化。