jQuery的抖动效果使控件失去了焦点 [英] jquery shake effect loosing focus from the control

问题描述

我正在使用一个jQuery来验证表单控件并在它们无效时对其进行摇动.

当我单击提交"时，它显示所有控件都在晃动，但是，这失去了所有控件的焦点.我的意思是，如果未在其中填充输入框，则应该将抖动和焦点(光标)放在该框中，但现在我可以设法进行抖动，但这会从输入框中失去焦点.

请任何人能帮助我.
我正在使用以下jquery

Hi,

I am using a jquery to validate the form controlls and to shake them when they are invalid.

When i click submit it shows all the controlls shaking but , it loosing focus from all the controlls. i mean if a input box not filled in it shoud shake and the focus (cursor) should be in that box but now i can manage to do the shake but it is loosing the focus from the input box.

Please can any one help me please.
I am using the following jquery

<script type="text/javascript" language="javascript">

        $().ready(function () {
        
        $(''#showLightDiv'').hide();
         $(''#barcode1Image'').hide();
          $(''#barcode2Image'').hide();
           $(''#barcode3Image'').hide();
            $(''#barcode4Image'').hide();
             $(''#barcode5Image'').hide();
              $(''#barcode6Image'').hide();
               $(''#barcode7Image'').hide();
                $(''#barcode8Image'').hide();
                 $(''#barcode9Image'').hide();  
                 $(''#barcode1ImageWrong'').hide(); 
                 $(''#barcode2ImageWrong'').hide(); 
                 $(''#barcode3ImageWrong'').hide(); 
                 $(''#barcode4ImageWrong'').hide(); 
                 $(''#barcode5ImageWrong'').hide(); 
                 $(''#barcode6ImageWrong'').hide(); 
                 $(''#barcode7ImageWrong'').hide(); 
                 $(''#barcode8ImageWrong'').hide(); 
                 $(''#barcode9ImageWrong'').hide();  
        
      
            $(''#contactForm'').validate({ 
                rules: {
                    name: "required",
                    tel: "required",
                    province: "required",
                    catname: "required",
                    email: { required:true , email:true },
                    barcode1: "required",
                    barcode2: "required",
                    barcode3: "required",
                    barcode4: "required",
                    barcode5: "required",
                    barcode6: "required",
                    barcode7: "required",
                    barcode8: "required",
                    barcode9: "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",
                    barcode2: "barcode required",
                    barcode3: "barcode required",
                    barcode4: "barcode required",
                    barcode5: "barcode required",
                    barcode6: "barcode required",
                    barcode7: "barcode required",
                    barcode8: "barcode required",
                    barcode9: "barcode required"
                    
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).stop()
                            .removeClass(validClass)
                            .addClass(errorClass)
                            .removeClass(validClass)
                            .effect(''shake'', {times: 4, distance: 5}, focus())
                            .css(''border-color'', ''Red'')
                            ;
                           
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).stop()
                    .removeClass(errorClass)
                    .addClass(validClass)                                   
                    .css(''border-color'', ''#d2d2d2'');
                    

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

            });
        }); 
    
    </script>

推荐答案

().ready(function(){

().ready(function () {

(''#showLightDiv'').hide ();

(''#showLightDiv'').hide();

(''#barcode1Image'').hide();

(''#barcode1Image'').hide();

这篇关于jQuery的抖动效果使控件失去了焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！