Question

我有代码：

<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

     },

它可以正常工作，但是如果输入的无效输入仍然显示错误，如果我尝试输入错误/成功图标，则会多次显示。

此外，如果我尝试显示错误消息，则错误/成功ico不会出现

Answer 1

使用$('.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>

将一个类插入一个div和一行html

1 个答案: