jQuery to validate input boxes and to shake them

Question

4.00/5 (1 vote)

See more:

Hello everyone!

I am using a jQuery plugin for validation of the input boxes, which will shake the boxes if they're left empty when trying to submit them.

Can somebody help me with that? I am using the following code, but it's not working. Please post me the solution or the sample application if you guys know any.

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.validate.min.js" type="text/javascript"></script>
   <script type="text/javascript">

       $().ready(function () {
           $('#contactform').validate({
               rules: {
                   name: "required",
                   tel: "required",
                   province: "required",
                   email: { required: true
                       //                        email: true
                   }
               },
               messages: {
                   name: "Please enter your Name",
                   tel: "Please enter your Surname",
                   province: "Mobile number is Required",
                   email: {
                       required: "Please enter email",
                       email: "Please enter a valid email address"
                   }
               },
               highlight: function (element, errorClass, validClass) {
                   $(element).stop()
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "0px" }, 100)
                            .addClass(errorClass)
                            .removeClass(validClass);
               },
               unhighlight: function (element, errorClass, validClass) {
                   $(element).stop()
                    .addClass(validClass)
                    .removeClass(errorClass);

               },
               errorPlacement: function (error, element) { }

           });

       });
       
        
    </script>

Thank you

Posted 7-Mar-11 1:08am

shekhardumala

Updated 7-Mar-11 4:10am

Manfred Rudolf Bihy

v4

Add a Solution

Comments

Manfred Rudolf Bihy 7-Mar-11 10:12am

Edit: Added pre tags, minor spelling and grammar.

[no name] 7-Mar-11 10:17am

And what is not working?

shekhardumala 8-Mar-11 3:13am

the input boxes are not shaking

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Blake Tullysmith · Answer 1 · 2011-03-07T14:01:00

Here is a working example using the UI effect shake http://blake.breakwatersyndicate.com/2011/03/shaky-validation/[^]

Other than that you are over complicating the implementation a bit, you just need rules and messages. I am not really seeing what you are trying to accomplish with the highlight/unhighlight code. Consider simplifying. You was welcome to build on my code it is released under MIT license like everything else on my site.

Let me know if you run into problems you can find me on twitter @blaketullysmith or just post a comment here or to the article on my blog whichever is easier for you.

Hope that helps.

-Blake

shekhardumala · Answer 2 · 2011-03-24T23:40:00

Hi Guys I used this and achived what i wanted.
<script type="text/javascript" language="javascript">

$().ready(function () {
$('#showLightDiv').hide();
$('#barcode1Image').hide();
$('#barcode1ImageWrong').hide();

$('#contactForm').validate({
rules: {
name: "required",
tel: "required",
province: "required",
catname: "required",
email: { required:true , email:true },
barcode1: "required",
Terms:"required"

},
messages: {
name: "Please enter your Name",
tel: "Please enter your Surname",
ddlProvince: "Mobile number is Required",
catname: "Cat's name required",
email: "Please enter email",
barcode1: "barcode required",
Terms:"Accept terms and conditions"

},
highlight: function (element, errorClass, validClass) {
$(element).stop()
.removeClass(validClass)
.addClass(errorClass)
.removeClass(validClass)
.css({position: 'relative'})
.css('border-color', 'red')
.animate({ left: -10 },150)
.animate({ left: 0 },150)
.animate({ left: 10 },150)
.animate({ left: 0 },150);
},
unhighlight: function (element, errorClass, validClass) {
$(element).stop()
.removeClass(errorClass)
.addClass(validClass)
.css('border-color', '#d2d2d2');
},
errorPlacement: function(error,element){
}
});
});

</script>

aj-learning.com · Answer 3 · 2014-10-14T00:48:00

Solution 3

we must use css3 and jquery to achieve this task. Textbox validate shake animation in jquery using css3

Posted 14-Oct-14 0:48am

aj-learning.com

jQuery to validate input boxes and to shake them

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0