jQuery Validate: validate form without throwing errors about empty fields

Question

I have a field with about eight required fields. I have some code that only enables a button if all fields are validated. Then, I have a method that checks to see if all fields are valid - only then is the button enabled.

$("#FirstName").on("keyup blur", function () {
        if ($("#FirstName").length > 0) {
            if ($("#FirstName").valid()) {
                isFirstNameValid = true;
            }
            else
                isFirstNameValid = false;

            checkIfAllFieldsAreValid();
        }

    })

The issue is that the required validation field is throwing an error when I tab to the next field, because the "keyup blur" event is firing on the next field even before I start typing. What event prevents this behavior from happening?

Answer 1

You can leave the submit button enabled and check when the user clicks it if the form is valid or not

$("#btnCreateMyAccount").on("click", function () {
        if ($("#CreateAccountForm").valid()) {
            return false;
        }
        else
        {
            //submit the data
        }
    })

Answer 2

Try checking if any of the inputs are empty before validating the form.

if($("your input field").val()=="") {
    return;
}