CODEWITHSUNDEEP
jqueryclassjquery-validatelabel
brett
brett

Reputation: 95

Jquery Validation - No Label - add to exisiting element, Can it be done?

I need some help so Ithink I've come to the right place. What I need is a way to add an error class/ required info class to form fields that arent correct/ valid.

At the moment I have this:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
    <div class="_required"><p class="label_left">Name*</p>
        <input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
    </div>
    <br/><br/>
    <div class="_required">
        <p class="label_left">E-mail address*</p>
        <input type="text" size="50" name="email" id="email" value="" class="required email" />
    </div>
    <br/>
    <br/>
    <p class="label_left">Message</p>
    <textarea rows="5" cols="50" name="message" id="message" class="required">
    </textarea>
    <br/>
    <input type="submit" value="submit" name="submit" id="submit" />
</form>

With the jquery bit: $("#contactform").validate({

But I dont want the errror appearing in a or any other element rather in this div in the form: because I want to wrap it in a background color.

So how do I do this... can it be done?>

Any help or direction would be awesome this is my first taste of Jquery

Upvotes: 0

Views: 1748

Answers (3)

Horacio Nu&#241;ez
Horacio Nu&#241;ez

Reputation: 231

You can substitute the default reporting of the plugin this way:

$('#contactform').validate({
            showErrors: function(errorMap, errorList) {

                //restore the normal look
                $('#contactform div.required').removeClass('required').addClass('_required');

                //stop if everything is ok
                if (errorList.length == 0) return;

                //Iterate over the errors
                for(var i = 0;i < errorList.length; i++)
                    $(errorList[i].element).parent().removeClass('_required').addClass('required');
            }
});

Upvotes: 1

Mahesh KP
Mahesh KP

Reputation: 6446

try to add the highlight and unhighlight rule to get highlight error elements

 $("#contactform").validate({

        },

        highlight: function (element, errorClass) {                
            $(element).css({ "background-color": "#EE2E24"});
        },

        unhighlight: function (element, errorClass) {
            $(element).css({ "background-color": "#FFFFFF" });
        },

         messages: {
            contactName: "",
            email: "",
            message: ""
        }

 });

Upvotes: 0

Praveen Prasad
Praveen Prasad

Reputation: 32107

as far as i understood your problem you can do this

jQuery.validator.addClassRules({

http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#rules

Upvotes: 0

Related Questions