how to add erroricon and custom validation message using jquery

0 votes

I Would like to add error icon and custom validation message using Jquery plugin. Like this

enter image description here

Here is my html code,

    <input type="text" id="firstName" name="firstName" class="required" />
    <input type="text" name="lastName" class="required" /> <br>

    <input id="email" type="text" name="email" class="required" /> <br>

Here is my Html code,

I have tried with errorPlacement function, however for some reason i am not able to get error message below the control. I have used prepentTo, appendTo, all jquery function to do this. but no luck!!!

function validateForm(){

            $("#register").validate({


                rules: {
                    firstName: {
                        required: true,
                        minlength: 2
                    }
                },
                    errorPlacement: function(error, element) {
                        error.insertAfter(element); 

                    },

            });
        }

Thanks

Jun 29 in Web Development by gaurav
• 17,580 points
68 views

1 answer to this question.

0 votes

By default, the error message is put inside a label which is an inline element.

Use the errorElement option to change this into a block level element and it will wrap automatically.

See: http://jsfiddle.net/kH9NL/

$(document).ready(function () {

    $('#myform').validate({ 
        errorElement: "div",
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        }
    });

});

You must use the highlight and unhighlight callback functions to manipulate the placement and toggling of your icons.

answered Jun 30 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
0 answers

How to preselect and disable specific checkboxes using js/jquery?

I have checkboxes with randomly generated ids ...READ MORE

Jul 26 in Web Development by gaurav
• 17,580 points
10 views
0 votes
0 answers

how to spin and stop wheel has custom position with jquery

this i my code. I am using this ...READ MORE

Jul 27 in Web Development by gaurav
• 17,580 points
12 views
0 votes
1 answer

How to alert using jQuery

alert($('#test')); // or alert($('#test'). get(0)); // also try alert(document. ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 views
0 votes
0 answers

How to add a link in Jquery PrettyPhoto to download the image

I am using Jquery PrettyPhoto to have ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
16 views
0 votes
0 answers
0 votes
1 answer

Jquery validation plugin - TypeError: $(...).validate is not a function

The "$(...). validate is not a function" ...READ MORE

answered Jun 28 in JQuery by rajatha
• 7,040 points
619 views
0 votes
1 answer

jQuery Validation plugin. Two custom rules not working

validation plugin works according to the name attribute and ...READ MORE

answered Jun 20 in JQuery by rajatha
• 7,040 points
43 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
10 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP