CODEWITHSUNDEEP
javascriptjqueryvalidation
Jeastburn
Jeastburn

Reputation: 95

Jquery Validation: removing class when form is valid

I'm using a multipart registration that renders each successive form when the next button is pressed and is not faded. The button starts faded. For the first form I have (much simplified):

<script>
if (registrationStage == 0 && $("#form").valid()) {
       nextBtn.removeClass("faded");
};
</script>

I know that the form is valid because ("#form").validate{//foo} is working properly and not giving errors. I'm also able to remove the class if I wrap it in a $("#foodiv").click( function() { // above code}); function. Is there a way to make it so that it's listening for those conditions to be true in order to unfade the next button?

Upvotes: 0

Views: 1662

Answers (2)

user4843530
user4843530

Reputation:

On each form, you could put a class on each input that must be validated:

<input id="FirstName" type="text" required class="ValidatingInput" />

Then add an event listener to all the elements of that class, listening for the onchange event. The change event works for textboxes, text areas, select lists, radio button groups, checkboxes, etc.:

$(".ValidatingInput").change(ValidateAll);

And define the ValidateAll function to check your inputs and enable/disable the button:

function ValidateAll()
{
    var EverythingChecksOut = true;
    if (document.getElementById("FirstName").value.Length = 0) {
        EverythingChecksOut = false;
    }
    ... other validations ...
    if (EverythingChecksOut) {
       nextBtn.removeClass("faded");
    } else {
       nextBtn.addClass("faded");
    }
}

Then every time the user changes one of those "required" or critical fields in the current registration form, your code checks. If they filled all the requirements, the button is un-faded. But if their changes leave the form in an invalid state, the button is faded. This means that even if they fill out the fields, and the button gets un-faded, but they then go back and remove one of the required values, then the button gets faded again.

Upvotes: 1

Alfred
Alfred

Reputation: 1296

Suppose you have a function checkMyForm() { //... }.

In case of <input> or <texxtarea> elements, you can use `.on("input", checkMyForm );

In case of <select> elements, you can use `.on("change", checkMyForm );

example,

$('#userId').on('input', checkMyForm );
$('#userPassword').on('input', checkMyForm );
$('#userGender').on('change', checkMyForm );

Upvotes: 0

Related Questions