Enable button in jqueryvalidator plugin

Question

I want to enable the button when validation is false, actually i am new to this jquery validator plugin , this is the code that i am using

<button class="btn" onclick="save_data_A()" id="per-btn">
    Next&nbsp;&nbsp;<i class="fas fa-arrow-right"></i>
</button>

function save_data_A() {
    $("#per-btn").addClass("disabled");
    var fileInput = document.getElementById('file');
    var file = fileInput.files[0];
    $("#frmdata_A").validate({
        rules: {
            val_phone: {
                required: true,
                minlength: 10,
                number: true,
                maxlength: 10
            },
            file: "required",
        },
        messages: {
            val_phone: "Enter valid Phone no",
            file: "Upload an image",
        },
        submitHandler: function(form) {
            alert('hai');
        }
    });
}

First, do not put `.validate()` in a `click` handler. It's the initialization method of the plugin, not a validation trigger. Once initialized, the click event is automatically captured; that's why you have a `submitHandler` function. Second, no need for inline JavaScript when you are using jQuery. Refer to the linked duplicates above for examples. — Sparky, Jun 13 '18 at 16:10

score 0 · Answer 1 · answered Jun 13 '18 at 07:15

Here is the solution: https://codepen.io/creativedev/pen/NzgPBK

$("#per-btn").on('click', function(event) {
    event.preventDefault();
    $(this).addClass("disabled");
    //var fileInput = document.getElementById('file');
    //var file = fileInput.files[0];
    $("#dataForm").validate({
        rules: {
            accountNameInput: {
                required: true,
                minlength: 10,
                number: true,
                maxlength: 10
            },
            //   file: "required",
        },

        messages: {

            val_phone: "Enter valid Phone no",
            //    file: "Upload an image",
        },

        submitHandler: function(form) {
            alert('hai');
        }
    });
    $('#dataForm').on('blur keyup change', 'input', function(event) {
        validateForm('#dataForm');
    });

    function validateForm(id) {
        var valid = $(id).validate().checkForm();
        console.log(valid)
        if (valid) {
            $("#per-btn").prop('disabled', false);
            $("#per-btn").removeClass('disabled');
        } else {
            $("#per-btn").addClass('disabled');
        }
    }
    validateForm('#dataForm');
})

Enable button in jqueryvalidator plugin

1 Answers1