gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:07:27 25 4
gpt4 key购买 nike

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

最佳答案

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;}

关于jquery - 组验证错误后文本框的位置正在改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19313265/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com