我有这个代码:
<div class="form-group label-floating">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">
<label for="name" generated="true" class="error"></label>
</div>
现在我想在这里插入一个.css类:
<div class="form-group label-floating HERE NEW CLASS">
现在基于那个可以是错误/成功的类,我想在输入行之后写一行html:
<span class="material-icons form-control-feedback">clear</span>
我想为表单中的每个字段都做这个。
如果出错应该是:
<div class="form-group label-floating **has-error**">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">
**<span class="material-icons form-control-feedback">clear</span>**
<label for="name" generated="true" class="error"></label>
</div>
如果成功:
<div class="form-group label-floating **has-succes**">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">
**<span class="material-icons form-control-feedback">done</span>**
<label for="name" generated="true" class="error"></label>
</div>
我这样做了:
errorPlacement: function(error, element) {
$(element).parent('div').addClass('has-error');
//$('.form-group').append('<span class="material-icons form-control-feedback">clear</span>'); // add the clear ico
},
success: function(element) {
$(element).parent('div').addClass('has-success');
//$('.form-group').append('<span class="material-icons form-control-feedback">done</span>'); // add done ico
},
这是有效的,但是在纠正无效输入后仍然显示错误,如果我尝试放置错误/成功图标,它会显示多次。
此外,如果我尝试显示错误消息,错误/成功图标不会出现
最佳答案
使用 $('.form-group.label-floating').addClass("success");
添加类。
我想这就是你想要的,可以让你去做你想做的事
$(function(){
$('#btn').click(function(){
$('.material-icons.form-control-feedback').remove();
if($('input[type="text"]').val() != '') {
$('.form-group.label-floating').addClass("has-success");
$('input[type="text"]').after('<span class="material-icons form-control-feedback">done</span>');
}
else {
$('.form-group.label-floating').addClass("has-success");
$('input[type="text"]').after('<span class="material-icons form-control-feedback">clear</span>');
}
if($('input[type="email"]').val() != '') {
$('.form-group.label-floating').addClass("has-success");
$('input[type="email"]').after('<span class="material-icons form-control-feedback">done</span>');
}
else {
$('.form-group.label-floating').addClass("has-success");
$('input[type="email"]').after('<span class="material-icons form-control-feedback">clear</span>');
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating">
<label class="control-label">Name <small>(required)</small></label>
<input name="name" type="text" class="form-control">
<label for="name" generated="true" class="error"></label>
</div>
<div class="form-group label-floating">
<label class="control-label">Email <small>(required)</small></label>
<input name="email" type="email" class="form-control">
<label for="email" generated="true" class="error"></label>
</div>
<button id="btn" >submit</button>
关于jquery - 插入一个类到一个div和一行html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39468844/