javascript - 如何在特定表单组类中添加跨度？

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>');
        } 
    }
    ...

如果有错误，我想给有email的form组添加append 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 方法将响应消息放在 input textbox 之前。

引用文档: 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>');
    } 
}

您可以使用 jQuery .after 方法将响应放在 input textbox 之后。

$.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>');
    } 
}

希望对您有所帮助。