Jquery Validation and CSS

Question

I have multiple DIV's on a page,which contain form fields.Some of them are required and some not.When a user jumps from one div to other by entering data.I have to validate the required fields are satisfied and change the CSS of that completed DIV.If required fields are not met,i should not change the css effect.I would like to approach this with Jquery.So,Can someone provide a good and clean design to approach.

Thanks

Please provide a jsfiddle so we can see the code.

jstrong
– jstrong

2012-06-01 19:56:15 +00:00
Commented Jun 1, 2012 at 19:56 — jstrong
– jstrong, Commented Jun 1, 2012 at 19:56

mprabhat · Accepted Answer · 2012-06-01 19:58:24Z

1

You can use jQuery validator plugin for validating your content.

Once your div looses focus you can then check if validation has passed or not, if not then dont apply the css or else apply css.

Sample code:

$("#divid").validate({
    onfocusout: false,    //once div looses focus validate
    rules: {
        //your rules go here
    }
});

answered Jun 1, 2012 at 19:58

mprabhat

20.3k7 gold badges49 silver badges64 bronze badges

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

5 Comments

user874722 Over a year ago

Thanks for the info.I haven't started coding yet.I wanted to get an understanding before putting my head down.One Question here,because I have multiple form fields on a page,how do i distinguish between required and optional fields.Do I have check the fields against a file or assign an attribute (req). Thanks for J Validator.

mprabhat Over a year ago

to the element you will add a class called as required

mprabhat Over a year ago

fields which are required add class="required" only to those, leave the other optional field as it is

user874722 Over a year ago

Yeah,taught so.Thanks mprabhat.

user874722 Over a year ago

Hey,how can this be handled during onload?On-load meaning I am populating the form with the data i already have respresnting it to the user.So,how can I check if my DIV has failed validation in this case? Thanks

Jason Kulatunga · Accepted Answer · 2012-06-01 19:57:01Z

0

Take a look at the jquery validate plugin

answered Jun 1, 2012 at 19:57

Jason Kulatunga

5,9041 gold badge28 silver badges50 bronze badges

Comments

Zachary · Accepted Answer · 2012-06-01 20:04:20Z

Using jQuery validation you can create your own method to validate a group of controls, I use this approach to wrap elements in a div or fieldset with the class name "validationGroup". Then, when I trigger an event from within the group I navigate up the DOM to the parent element with the class name and validate everything underneath. Using this approach, you can control/limit the validation to the controls in the current div being edited.

function ValidateAndSubmit(evt) { var isValid = true;

// Get Validator & Settings
var validator = $("#aspnetForm").validate();
var settings = validator.settings;

// Find the parent control that contains the elements to be validated
var $group = $(evt.currentTarget).parents('.validationGroup');

// Grab all the input elements (minus items listed below)
$group
    .find(":input")
    .not(":submit, :reset, :image, [disabled]")
    .not(settings.ignore)
    .each(function (i, item)
    {
        // Don't validate items without rules
        if (!validator.objectLength($(item).rules()))
            return true;

        if (!$(item).valid())
            isValid = false;
    });

// If any control is the group fails, prevent default actions (aka: Submit)
if (!isValid) {
    evt.preventDefault();
}

return isValid;

}

Collectives™ on Stack Overflow

Jquery Validation and CSS

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related