仅当div包含“someText”时，Jquery才提交表单

Question

<div id="field"><div class="field-item ">someText</div></div><br>

<form action="submit.php">
<input type="text" >
<button id="somediv" class="button button4" >CHECK URL</button>
</form>


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(event){


if ($('#field > div.field-item:contains("someText")').length > 0) {
    $("#somediv").removeClass("button button4");
    $("#somediv").addClass("button button2");
     $("#somediv").text("DOWNLOAD");
     setTimeout(() => {
             $("#somediv").removeClass("button button3");
              $("#somediv").addClass("button button4");
             $("#somediv").text("CHECK URL");
             location.reload();
        }, 8000);


}
else{
    $("#somediv").removeClass("button button4");
    $("#somediv").addClass("button button3");

     $("#somediv").text("THIS IS NOT VALID! ");
setTimeout(() => {
             $("#somediv").removeClass("button button3");
              $("#somediv").addClass("button button4");
             $("#somediv").text("CHECK URL");
             location.reload();
        }, 1000);




}
  });
});
</script>

现在，我只想在按下按钮时提交我的表单，如果item.contains为“SomeText”，并且如果div与该文本不同则阻止提交...我试着调用函数onsubmtit但是在我的情况下从提交没有条件...

Answer 1

为了使这项工作首先挂钩submit元素的form事件，而不是click的button。然后在else逻辑调用preventDefault()对事件停止表单提交。

另请注意，您可以缓存#somediv选择器，也可以干掉setTimeout()调用。试试这个：

$(document).ready(function() {
  var $div = $('#somediv');

  $("form").on('submit', function(e) {
    var timeoutDelay;
    if ($('#field > div.field-item:contains("someText")').length > 0) {
      $div.removeClass("button button4").addClass("button button2").text("DOWNLOAD");
      timeoutDelay = 8000;
    } else {
      e.preventDefault();

      $div.removeClass("button button4").addClass("button button3").text("THIS IS NOT VALID");
      timeoutDelay = 1000;
    }

    setTimeout(() => {
      $div.removeClass("button button3").addClass("button button4").text("CHECK URL");
      location.reload();
    }, timeoutDelay);
  });
});

有几点需要注意。首先，这是一种非常不可靠的验证方法。我强烈建议您重新考虑如何启用提交。

其次，如果验证通过，表格将立即提交，因此超时和location.reload()的8秒延迟完全是多余的。