JQuery 表单验证啥都不做

Posted 2023-05-09

【中文标题】JQuery 表单验证啥都不做

【英文标题】：JQuery Form Validation Does NothingJQuery 表单验证什么都不做

【发布时间】：2019-03-08 19:12:03

【问题描述】：

当我提交表单时，这段代码没有做任何事情。我究竟做错了什么？在 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;
  

);

【问题讨论】：

也向我们展示 HTML 代码。

这个validateForm函数在哪里被调用？

为什么不为此目的使用jquery.validate 库。它会让你的生活轻松很多。

也包括您的HTML。

你应该声明function validateForm() ... out of $(document).ready(function() ...

【参考方案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>

【参考方案2】：

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

【讨论】：

OP已经有很多错误，所以返回false不会解决他的问题。