jQuery Validation disable submit button until form validated

RegEdit picture RegEdit · Oct 24, 2013 · Viewed 9k times · Source

In the script below, I'm trying to capture the success event of the validation engine (all form element's validation criteria are satisfied) without submitting the form.

The idea is to disable the submit button until the validation is met, then I'd like to enable it. (The validationEngine examples I've seen appear to require the submit button to be enabled in order to submit the form, then its validated after the submit)

However, I can't get the "valid" method in my validate() function to fire. Any ideas what I'm doing wrong?

    $(document).ready(function() {
        /* disable the submit button until required form elements are enabled */ 
        $('#btnEcommidEdit').attr('class','button disabled');
        $('#btnEcommidEdit').attr("disabled","disabled");

        /* initiate validation */
        $("#form1").validationEngine(
        {
            inlineValidation: true
        });

        /* check form elements to enable submit button */
        $('#email2,#confirm1,#confirm2').change(function() {
            validate();
        });
    });

    function validate(){
        var valid = $("#form1").validationEngine();
        if (valid)
        $("#btnEcommidEdit").attr('disabled','');
        else
        $("#btnEcommidEdit").attr("disabled","disabled");
        }

Answer

DevlshOne picture DevlshOne · Oct 24, 2013
function validate(){
    alert("validate");
    var valid = $("#form1").validationEngine();
    alert('Validation Engine returned : ' + valid);
    if (valid == true) {
        $("#btnEcommidEdit").prop("disabled",false);
        $("#form1").submit();
    } else {
        $("#btnEcommidEdit").prop("disabled",true);
        return false;
    }