这是jquery验证与模态，但文本错误无法更改颜色。我已经在css中尝试过，但没有任何事情发生。
function showModals() {
$("#myModals").modal("show");
}
//validasi password
$("form#formUsr").validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
rules: {
password_baru: {
minlength: 6
},
ulangi_password: {
equalTo: "#password_baru",
minlength: 6
}
},
messages: {
password_baru: {
minlength: "Password minimal 6 karakter!"
},
ulangi_password: {
minlength: "Password minimal 6 karakter!",
equalTo: "Password tidak sama!"
}
}
});my-error-class {
color:red!important;
}
my-valid-class {
color:green!important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a href="#" onclick="showModals(this.id);" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i> Edit Profil</a>
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Tambah User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formUsr">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label class="col-sm-3 control-label">Password Baru</label>
<div class="col-sm-8">
<input type="password" id="password_baru" class="form-control" name="password_baru" required="" autocomplete="off" placeholder="Minimal 6 karakter">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Ulangi Password</label>
<div class="col-sm-8">
<input type="password" id="ulangi_password" class="form-control" name="ulangi_password" required="" autocomplete="off" placeholder="Ulangi password baru">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal">Tutup</button>
<input id="submit" type="submit" class="btn btn-success btn-flat pull-right" value="Simpan">
</div>
</form>
</div>
</div>
</div>
如何更改颜色和背景颜色错误消息？谢谢
答案 0 :(得分：0)
类应始终以句点（。）为前缀，检查CSS是否有更改。
function showModals() {
$("#myModals").modal("show");
}
//validasi password
$("form#formUsr").validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
rules: {
password_baru: {
minlength: 6
},
ulangi_password: {
equalTo: "#password_baru",
minlength: 6
}
},
messages: {
password_baru: {
minlength: "Password minimal 6 karakter!"
},
ulangi_password: {
minlength: "Password minimal 6 karakter!",
equalTo: "Password tidak sama!"
}
}
});.my-error-class {
color:red!important;
}
.my-valid-class {
color:green!important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a href="#" onclick="showModals(this.id);" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i> Edit Profil</a>
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Tambah User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formUsr">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label class="col-sm-3 control-label">Password Baru</label>
<div class="col-sm-8">
<input type="password" id="password_baru" class="form-control" name="password_baru" required="" autocomplete="off" placeholder="Minimal 6 karakter">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Ulangi Password</label>
<div class="col-sm-8">
<input type="password" id="ulangi_password" class="form-control" name="ulangi_password" required="" autocomplete="off" placeholder="Ulangi password baru">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal">Tutup</button>
<input id="submit" type="submit" class="btn btn-success btn-flat pull-right" value="Simpan">
</div>
</form>
</div>
</div>
</div>
答案 1 :(得分：0)
你错过了CSS课程中的点，你已经在CSS中使用点（。）来定义类.my-error-class
function showModals() {
$("#myModals").modal("show");
}
//validasi password
$("form#formUsr").validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
rules: {
password_baru: {
minlength: 6
},
ulangi_password: {
equalTo: "#password_baru",
minlength: 6
}
},
messages: {
password_baru: {
minlength: "Password minimal 6 karakter!"
},
ulangi_password: {
minlength: "Password minimal 6 karakter!",
equalTo: "Password tidak sama!"
}
}
});.my-error-class {
color:red!important;
}
.my-valid-class {
color:green!important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a href="#" onclick="showModals(this.id);" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i> Edit Profil</a>
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Tambah User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formUsr">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label class="col-sm-3 control-label">Password Baru</label>
<div class="col-sm-8">
<input type="password" id="password_baru" class="form-control" name="password_baru" required="" autocomplete="off" placeholder="Minimal 6 karakter">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Ulangi Password</label>
<div class="col-sm-8">
<input type="password" id="ulangi_password" class="form-control" name="ulangi_password" required="" autocomplete="off" placeholder="Ulangi password baru">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal">Tutup</button>
<input id="submit" type="submit" class="btn btn-success btn-flat pull-right" value="Simpan">
</div>
</form>
</div>
</div>
</div>