所以我已经在我的代码中实现了 jquery 验证插件,如下面的代码所示,但是我在显示所有选项之后的错误代码时遇到了问题。此时它被放置在第一个按钮选项中。任何人都可以帮助更改我在 JavaScript 中的错误放置代码,以便将错误放置在每个组的所有单选按钮之后。
这是我的 php 文件,其中包含表单
<form class="form-horizontal" id="Form" action="form.php" method="POST">
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="right" /> male
</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="left" /> female
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Height</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="height" value="tall" /> Tall
</label>
<label class="btn btn-default">
<input type="radio" name="height" value="small" /> Small
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Scale</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="scale" value="1" /> 1
</label>
<label class="btn btn-default">
<input type="radio" name="scale" value="2" /> 2
</label>
<label class="btn btn-default">
<input type="radio" name="scale" value="3" /> 3
</label>
<label class="btn btn-default">
<input type="radio" name="scale" value="4" /> 4
</label>
<label class="btn btn-default">
<input type="radio" name="scale" value="5" /> 5
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-4">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
</form>
这是验证 javascript 代码:
<script type="text/javascript">
$("#Form").validate({
rules: {
gender: {
required: true
},
height: {
required: true
},
scale: {
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.form-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
form.submit();
}
});
我尝试使用这个bootstrap v3.3.4
, jQuery v2.1.4
and validate v1.13.1
我得到了以下信息错误放置根据 HTML 的结构工作的语法:
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.insertAfter(element.closest("div"));
} else {
error.insertAfter(element);
}
}
希望这对事业有所帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)