提交空字段后输出错误的问题

Question

我的脚本有问题，唯一的问题是输出错误。submit_button 之后的错误只是砖块。所以这意味着当字段为空时，它必须输出错误并且它可以工作，但问题是输出只是砖块

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<form method="post">

  <input type="text" id="text_field1" />

  <input type="text" id="text_field2">

  <button type="submit" id="submit_button">Submit</button>

  <button type="submit">Submit</button>

  <p id="error_resp"></p>

</form>

<script>

  $("#submit_button").click(function() {

    if ($("#text_field1").val() == "")

      $('#error_resp').text('please fill the required field');

    else if ($("#text_field2").val() == "")

      $('#error_resp').text('please fill the required field');

    else

      return true;

  });

</script>

Answer 1

form您的HTML中几乎没有问题。您没有使用preventDefault()会阻止表单默认行为的方法，因此可以验证 inout。此外，您不需要检查空输入，例如== ""您可以!说我的输入是否为空，然后显示错误消息您在error_resp理想情况下显示错误.html以清除以前的消息并替换为新消息你可以在这里阅读更多.html将代码段运行到下面以查看它的工作原理。$("#submit_button").click(function(e) {&nbsp; e.preventDefault();&nbsp; if (!$("#text_field1").val()) {&nbsp; &nbsp; $('#error_resp').html('please fill the first required field');&nbsp; } else if (!$("#text_field2").val()) {&nbsp; &nbsp; $('#error_resp').html('please fill the second required field');&nbsp; } else {&nbsp; &nbsp; $('#myForm').submit();&nbsp; &nbsp; console.log('All looking good. Form will submit now')&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form method="post" id="myForm" action="filename.php">&nbsp; <input type="text" id="text_field1" />&nbsp; <input type="text" id="text_field2">&nbsp; <button type="submit" id="submit_button">Submit</button>&nbsp; <p id="error_resp"></p></form>