1

我使用了 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>

这是发生错误时发生的情况在此处输入图像描述

4

1 回答 1

1

here是我想适合您的问题的解决方案。

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

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

也添加float: left到输入类。

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

   .mid_input{width:36%!important;float:left;}
于 2013-10-11T08:40:02.747 回答