使用parsleyjs验证后启用提交按钮

Question

Parsley是否有一种简单的方法可以在禁用提交按钮的情况下加载表单，并启用它以满足表单的所有验证要求？

Answer 1

我不确定你所说的“简单”是什么意思，但是你可以完成什么。

你需要听事件 parsley:form:success和parsley:form:error来启用/禁用按钮。

您还需要监控每个表单字段的更改，以强制Parsley进行验证。 一旦你点击submit Parsley就会执行验证。 由于提交已禁用，您需要手动触发验证。

所以，这是一个工作示例（ 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>

请注意，您需要让您监视所有字段（输入，选择，文本等）的更改。

Answer 2

可以使用下面的代码，它会在禁用提交按钮的情况下加载表单，并在满足表单的某些验证要求时启用它：

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;
}