组验证错误文本框的位置正在改变

我已经使用jquery验证的组验证来验证包含3个文本框的电话号码。我的代码将显示3个文本框的单一验证错误。但是如果发生验证错误，那么文本框的位置正在改变。下面是我的代码组验证错误文本框的位置正在改变

<!DOCTYPE html> 
<html> 
<head> 

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript" src="jquery_validation.js"></script> 
    <style> 
     .error{ 
      color: hsl(0, 100%, 50%); 
      float: left; 
      font: 10px/17px "Lato Reg",arial; 
      width: 50%; 
     } 
     .sm_input{width:20%!important;margin-right: 3%;} 
     .mid_input{width:36%!important;} 
    </style> 
    <script> 
     $(document).ready(function() { 


       $("#form1").validate({ 
        groups: { 
         phoneNumber: "phone_no_1 phone_no_2 phone_no_3" 
        }, 
        rules: { 
         'phone_no_1': { 
          required: true, 
          minlength: 3, 
          maxlength: 3, 
          number: true 
         }, 
         'phone_no_2': { 
          required: true, 
          minlength: 3, 
          maxlength: 3, 
          number: true 
         }, 
         'phone_no_3': { 
          required: true, 
          minlength: 4, 
          maxlength: 4, 
          number: true 
         } 
        }, 
        errorPlacement: function(error, element) { 
         if (element.attr("name") == "phone_no_1" 
           || element.attr("name") == "phone_no_2" || element.attr("name") == "phone_no_3") 
          error.insertAfter("#phone_no"); 
         else 
          error.insertAfter(element); 
        } 

      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1"> 

     <label>Phone Number</label> 

     <input type="text" class="sm_input" name="phone_no_1" id="phone_no_1" maxlength="3" size="3" tabIndex=1> <input type="text" class="sm_input" name="phone_no_2" id="phone_no_2" maxlength="3" size="3" tabindex=1 > <input type="text" class="mid_input" name="phone_no_3" id="phone_no_3" maxlength="4" size="4" tabindex=3 > 
     <label id="phone_no"></label> 
     <div class="clear"></div> 




    </form> 

</body> 
</html>

这是发生错误时 enter image description here

来源

2013-10-11 asdfdefsad

你可以创建一个小提琴，因为它会更容易调试。 –

http://jsfiddle.net/KFUnf/2/ – asdfdefsad

here是我的猜测适合你的问题的解决方案会发生什么。

you just have to float text and labels boxes using float:left; 

<label style="float:left;">Phone Number</label>

add float: left也输入类别。

.sm_input{width:20%!important;margin-right: 3%;float:left;} 

    .mid_input{width:36%!important;float:left;}

来源

2013-10-11 08:40:02

非常感谢。 – asdfdefsad

高兴.... :) –

组验证错误文本框的位置正在改变

回答

相关问题