如何在特定表单组类中添加span?

时间:2017-08-24 04:53:57

标签: javascript jquery html ajax validation

我喜欢这样的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>');
        } 
    }
    ...

如果出现错误,我想将附加范围添加到有电子邮件的表单组

我尝试了这种方式,但它添加了所有表单组

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

您可以使用解决方案https://jsfiddle.net/w0thxhox/

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

我已使用jQuerybefore方法将回复消息放在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>');
    } 
}

希望这会对你有所帮助。

答案 1 :(得分:0)

您要在所有 $(".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>');

install.packages("processmapR")
library(processmapR)

Error in loadNamespace(i, c(lib.loc, .libPaths()), versionCheck = vI[[i]]) : 
there is no package called ‘DiagrammeR’
In addition: Warning message:
package ‘processmapR’ was built under R version 3.3.3 
Error: package or namespace load failed for ‘processmapR’