如何在特定的表格组类中添加跨度？

Question

我的HTML这样的：

<div class="form-group"> 
    //name 
</div> 
<div class="form-group"> 
    //gender 
</div> 
<div class="form-group"> 
    //email 
    ... 
    <input id="email" name="email" type="email" class="form-control"> 
    ... 
</div> 

我的JavaScript是这样的：

$.ajax({ 
    ... 
    error: function(request, status, error) { 
     if ($('#email').val()) { 
      $("#email").closest('.form-group').removeClass('has-success').addClass('has-error'); 
      $(".form-group").append('<span class="error error-server help-block">'+request.responseJSON.email[0]+'</span>'); 
     } 
    } 
    ... 

如果有错误，我要追加跨度添加到具有电子邮件

我的表单组尝试过这种方式，但它添加了所有形式的组

我该如何解决这个问题？

Answer 1

在这里，你有一个解决方案https://jsfiddle.net/w0thxhox/

$("#email").closest('.form-group').removeClass('has-success').addClass('has-error'); 
 
$("#email").before('<span class="error error-server help-block">request.responseJSON.email[0]</span>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    //name 
 
</div> 
 
<div class="form-group"> 
 
    //gender 
 
</div> 
 
<div class="form-group"> 
 
    //email 
 
    <input id="email" name="email" type="email" class="form-control"> 
 

 
</div>

去

我已使用jQuery。 before在inputtextbox之前放置响应消息的方法。

参考文献：https://www.w3schools.com/jquery/html_before.asp

在您的方案，

$.ajax({ 
... 
error: function(request, status, error) { 
    if ($('#email').val()) { 
     $("#email").closest('.form-group').removeClass('has-success').addClass('has-error'); 
     $("#email").before('<span class="error error-server help-block">'+request.responseJSON.email[0]+'</span>'); 
    } 
} 

可以使用用于放置响应后inputtextboxjQuery.after方法。

$.ajax({ 
... 
error: function(request, status, error) { 
    if ($('#email').val()) { 
     $("#email").closest('.form-group').removeClass('has-success').addClass('has-error'); 
     $("#email").after('<span class="error error-server help-block">'+request.responseJSON.email[0]+'</span>'); 
    } 
} 

希望这会帮助你。

Answer 2

您正在为所有form-group类添加跨度。

您需要更改这个

$(".form-group").append('<span class="error error-server help-block">'+request.responseJSON.email[0]+'</span>'); 

到

$("#email").closest('.form-group').append('<span class="error error-server help-block">'+request.responseJSON.email[0]+'</span>');