JQuery 表单验证什么都不做

Question

当我提交表单时，这段代码没有做任何事情。我究竟做错了什么？在 HTML 中，根据类显示或隐藏错误消息。

希望你能帮我解决这个问题。提前致谢。

$(document).ready(function() {
  function validateForm() {
    var first_name = $("#first_name").value;
    var last_name = $("#last_name").value;
    var phone = $("#phone").value;
    var email = $("#email").value;
    var code = $("#vali_code").value;
    var ssn = $("#ssn").value;
    var income = $("#nm_income").value;
    var error = $(this).find("span.error_txt").removeClass(".hidden").addClass(".show");

    var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

    if (first_name === "") {
      error;
    }

    if (last_name === "") {
      error;
    }

    if (email === "" || email !== emailReg) {
      error;

    }

    if (phone === "" || phone < 9) {
      error;
    }

    if (ssn === "" || ssn > 4) {
      error;
    }

    if (income === "") {
      error;
    }

    if (code === "") {
      error;
    }

    return true;
  }

});

Answer 1

如果您在内联事件onsubmit 中调用函数，您应该在表单内联事件中的函数调用中添加return 关键字，例如：

<form onsubmit='return validateForm()'>

但我认为主要问题来自代码中的 .value，它应该被 .val() 替换，因为 value 不是 jQuery 对象的属性。

我的建议是在 JS 代码中附加提交事件，如下面的 sn-p。

注意：传递给removeClass() 和addClass() 方法的参数不应在开头包含点.。

$(function() {
  $('form').on('submit', validateForm);
})

function validateForm() {
  var first_name = $("#first_name").val();
  var last_name = $("#last_name").val();

  $(this).find("span.error_txt").removeClass("hidden").addClass("show");

  if (first_name === "") {
    return false;
  }

  if (last_name === "") {
    return false;
  }

  alert('Form will be submited.');
  return true;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id='first_name'><br>
  <input id='last_name'><br>

  <button>Submit</button>
  <span class="error_txt hidden">Error occurred check you form fields again.</span>
</form>

Answer 2

如果表单无效，需要return false，否则会被提交。