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

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中几乎没有问题。

1. 您没有使用preventDefault()会阻止表单默认行为的方法，因此可以验证 inout。

2. 此外，您不需要检查空输入，例如== ""您可以!说我的输入是否为空，然后显示错误消息

3. 您在error_resp理想情况下显示错误.html以清除以前的消息并替换为新消息

你可以在这里阅读更多.html

将代码段运行到下面以查看它的工作原理。

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

  e.preventDefault();

  if (!$("#text_field1").val()) {

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

  } else if (!$("#text_field2").val()) {

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

  } else {

    $('#myForm').submit();

    console.log('All looking good. Form will submit now')

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" id="myForm" action="filename.php">

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

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

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

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

</form>