Question

你好（我找不到任何类似的问题，如果你这样做请告诉我），这里要实现的目标是在元素之后插入html内容，如果在删除之前插入了html内容它。我的代码现在[部分HTML和Js]

<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>
    $(document).ready(function (){
        $("form").on("submit",function (e){
            e.preventDefault();
            $(this).find(":text").each(function (){
                if($(this).val()==''){
                    $(this).after("<p class='error'>Please fill this field</p>");
                }
            });
        });
    });
</script>

代码完成它的工作，但问题是，如果表单被多次提交文本＆＃34;请填写此字段＆＃34;多次显示我想过在每次输入之后放一个span（或div）并编写下一个代码：

 $(this).next("span").html("<p class='error'>Please fill this field</p>");

这将是一个解决方案，但问题是我必须在每次输入之后编写一个跨度，我想要验证并且效率不高。我想知道更好的方法来实现这一目标，如果你能告诉我那将是非常棒的，

Answer 1

这样做的一种方法是删除所有错误，然后读取适用的错误。

＆＃13;

$(document).ready(function (){
    $("form").on("submit",function (e){
        e.preventDefault();
        $("p.error").remove();
        $(this).find(":text").each(function (){
            if($(this).val()==''){
                $(this).after("<p class='error'>Please fill this field</p>");
            }
        });
    });
});

＆＃13;

input {
  display:block;
  margin-top:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>

</script>

＆＃13;

Answer 2

每次提交表单时，只需删除带有类错误的dom元素，如下所示

<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>
    $(document).ready(function (){
        $("form").on("submit",function (e){
            e.preventDefault();
            : $( "form . error" ).remove();
            $(this).find(":text").each(function (){
                if($(this).val()==''){
                    $(this).after("<p class='error'>Please fill this field</p>");
                }
            });
        });
    });
</script>

这样，点击提交时将删除所有错误。如果不存在，则不会删除任何内容

Jquery在删除现有元素的元素后插入html

2 个答案: