在使用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> 

请注意，你需要让你监控所有字段（输入，选择，文本域等）的变化。