我是jQuery的新手并试图在验证注册页面时使用它。 这是我的HTML
120.0000这是我的javascript
<div class="form-group">
<label for="inputFirstName" class="col-lg-3 control-label">First name</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="inputFirstName" name="inputFirstName" placeholder="First name">
<span class="" aria-hidden="true"></span> <-- this span
</div>
</div>
如果验证成功，我想将$(document).ready(function () {
$('#registration-form').validate({
rules: {
inputFirstName: {
required: true,
},
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
//want to remove 'glyphicon glyphicon-ok form-control-feedback' and then add some other class to span
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
//want to insert 'glyphicon glyphicon-ok form-control-feedback' to span
}
});
});
添加到范围
我尝试添加
glyphicon glyphicon-ok form-control-feedback
但它不起作用。
我怎样才能做到这一点？
由于
答案 0 :(得分：1)
第1步 给你的跨度id
<span class="" id="myspan" aria-hidden="true">
第2步
使用jquery的addClass（）方法（如下所示）成功
<%--
Created by IntelliJ IDEA.
User: RaghavFTW
Date: 04/07/15
Time: 15:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../shared/header.jsp"/>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form action="/register" id="registration-form" class="form-horizontal" method="post">
<fieldset>
<legend>Register</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-3 control-label">First name</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="inputFirstName" name="inputFirstName"
placeholder="First name">
<span class="" for="inputFirstName" id="spanFirstName" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-lg-3 control-label">Last name</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="inputLastName" name="inputLastName"
placeholder="Last name">
<span class="" for="inputLastName" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="inputUsername" name="inputUsername"
placeholder="Username">
<span class="" for="inputUsername" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-6">
<input type="password" class="form-control" name="inputPassword" id="inputPassword"
placeholder="Password">
<span class="" for="inputPassword" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-3 control-label">Email</label>
<div class="col-lg-7">
<input type="text" class="form-control" id="inputEmail" name="inputEmail"
placeholder="Email">
<span class="" for="inputEmail" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="address" class="col-lg-3 control-label">Address</label>
<div class="col-lg-9">
<textarea style="max-width: 100%" class="form-control" rows="3" id="address"
name="address"></textarea>
<span class="" for="address" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-6">
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="Male"
checked="">
Male
</label>
<br>
<label>
<input type="radio" name="gender" id="female" value="female">
Female
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-8">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<jsp:include page="../shared/footer.jsp"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script>
$(document).ready(function () {
$('#registration-form').validate({
rules: {
inputUsername: {
minlength: 5,
required: true
},
inputPassword: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
inputEmail: {
required: true,
email: true
},
address: {
minlength: 10,
required: true
},
inputFirstName: "required",
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
// var identify = element.parent();
// console.log(identify);
// $("span[for='"+identify+"']").removeClass("glyphicon glyphicon-ok form-control- feedback");
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
$(element).remove();
var identify = element.attr("for");
console.log(identify);
$("span[for='"+identify+"']").addClass("glyphicon glyphicon-ok form-control- feedback");
}
});
$('#search-form').validate({
rules: {
search: "required"
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
$("input,textarea").change(function(){
var identify = this.id;
console.log(identify);
$("span[for='"+identify+"']").removeClass("glyphicon glyphicon-ok form-control-feedback");
});
})
; // end document.ready
</script>
答案 1 :(得分：1)
尝试使用
$(element).closest('div[class="col-lg-6"]').find('span').addClass("glyphicon glyphicon-ok form-control- feedback");