apply a jQuery effect in ASP based on validation result

Question

I have a webform with a control panel (#pnlStepOne). The panel includes two textfields "txtFname" and "txtLname". I have a validator setup for each textfield. I have tested the form and all works as desired.

My questions is how do I add a jQuery effect to the panel onclick event only if one (or both) of the textfields ("txtFname" and "txtLname") don't validate. (this effect would "shake" the panel).

And I would like to add another jQuery effect to "flip" the control panel and switch the current one (#pnlStepOne) for another one (#pnlStepTwo) if both fields are validated by the asp:RequiredFieldValidators.

Just a sample code that I will tweak once I have the right If condition.

$(document).ready(function () {
        $("#btnStepOne").click(function (event) {
            if (**this is the condition that I am missing**)
            {
                $('#pnlStepOne').css({
                    background: 'red',
                });                
            }
        });
    });

What are you using for validation? Are you using the default ASP.NET validators (like `asp:RequiredFieldValidator`)? — Stefano Dalpiaz, May 08 '14 at 03:42
@Stefano -Yes, I am using the default asp.net validators. `` — user3437783, May 08 '14 at 12:07

score 1 · Answer 1 · edited May 23 '17 at 12:05

Have a rad of my answer to a similar question here:

Enable/Disable asp:validators using jquery

Which has the MSDN link here: http://msdn.microsoft.com/en-us/library/aa479045.aspx

In one of my projects I use a prettifyValidation function, so you could have something like:

$(document).ready(function () {
    $("#btnStepOne").click(function (event) {
        prettifyValidation();
    });
});



function prettifyValidation() {
    var allValid = true;
    if (typeof Page_Validators != 'undefined') {
        // Loop through from high to low to capture the base level of error
        for (i = Page_Validators.length; i >= 0; i--) {
            if (Page_Validators[i] != null) {

                if (!Page_Validators[i].isvalid) { // The Control is NOT Valid
                    $("#" + Page_Validators[i].controltovalidate).removeClass("makeMeGreen").addClass("makeMeRed");

                    allValid = false;
                } else { // Control is valid
                    $("#" + Page_Validators[i].controltovalidate).removeClass("makeMeRed").addClass("makeMeGreen");
                };
            };
        };
    };
}

This will loop through all controls on the page that have an ASP.NET validator attached, and then add or remove a class depending if they are valid or not.

Obviously from here you can limit the function to a specific control by matching the controlToValidate property, and you can restyle, add controls, change classes but this should hopefully provide you a decent base to work from.

score 1 · Accepted Answer · answered May 08 '14 at 23:52

You can modify your code to be like this:

$(document).ready(function () {
    $("#btnStepOne").click(function (event) {
        var fvFname = document.getElementById('client-id-of-your-fvFname-validator');
        var fvLname = document.getElementById('client-id-of-your-fvLname-validator');
        ValidatorValidate(fvFname);
        ValidatorValidate(fvLname);
        if (!fvFname.isvalid || !fvLname.isvalid) {
            $('#pnlStepOne').css({
                background: 'red',
            });
        }
    });
});

apply a jQuery effect in ASP based on validation result

2 Answers2