Jquery Validation: removing class when form is valid

Question

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?

score 1 · Accepted Answer · 2015-11-19 18:03:11Z

1

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.

edited Nov 19, 2015 at 18:03

answered Nov 19, 2015 at 17:54

user4843530

Sign up to request clarification or add additional context in comments.

2 Comments

Jeastburn Over a year ago

Yup, this looks to be working generally. It's too bad this has to be defined as on an action and not something that can be sitting in the background. I guess if that was allowed you could run into situations where you have large scripts eating tons of memory.

user4843530 Over a year ago

That is correct, way back, development platforms used to implement events with listeners that executed in the background, actively listening for events. But that was way too expensive on resources (memory and cpu). Event driven - events actually firing off the listener - is a much more efficient model if you think about it. Why have anything execute, even in the "background", unless and until the thing that triggers it actually happens.

Alfred · Accepted Answer · 2015-11-19 17:51:05Z

0

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

answered Nov 19, 2015 at 17:51

Alfred

1,29611 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery Validation: removing class when form is valid

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related