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()不是jQuery对象的属性，所以应该将其替换为value。

我的建议是将提交事件附加到JS代码中，如下面的代码片段。

注意：：传递给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，否则它将被提交。

jQuery表单验证无效

2 个答案: