使用 jquery 表单验证脚本，当输入正确时显示“OK!”消息。我不想在字段下方显示“OK!”消息，而是将其放在字段右侧(错误消息仍在字段下方)，如下图所示:
这是一个有效的 fiddle :https://jsfiddle.net/q7nub2v4/1/
以及对应的代码:
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
</head>
<form id="registration-form" action="#" method="POST">
<div class="col-sm-5">
<div class="control-group has-feedback">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" name="username" id="username" class="form-control" placeholder="user"/>
</div>
</div>
<div class="control-group has-feedback">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" name="email" id="email" class="form-control" placeholder="email"/>
</div>
</div>
<div class="control-group has-feedback">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>
<script>
$(document).ready(function () {
$('#registration-form').validate({
rules: {
username: {
rangelength: [6, 16],
pattern:/^[a-zA-Z0-9_-]+$/,
required: true
},
email: {
required: true,
email: true
},
password: {
rangelength: [8, 12],
required: true,
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('has-success').addClass('has-error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('has-error').addClass('has-success');
}
});
});
</script>
最佳答案
在右边留一些空间(例如:输入宽度90%)然后将输入框显示设置为“inline-block”。
input[type=text], input[type=password] {
width: 90%;
display: inline-block;
margin-right: 5px;
}
关于javascript - 表单验证 : change message location，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35697003/