如何使用 jQuery 正确验证表单？

Question

所以我的表单有这个 jQuery：

frm.submit(function(event) {

  validateForm();

  if(validateForm()) {
    $(this).submit();
    } else {
    event.preventDefault();
  }

});

它确实有点工作，但我得到 JS <error> （并且它没有在控制台中说明任何其他内容），我认为原因是该函数必须再次通过验证？ 有点像循环依赖。

你能告诉我一种更好的方法来做我想要在这里实现的确切目标吗？

1. 如果填写错误，验证并显示错误；
2. 如果一切正常，请提交表单

Answer 1

function validateForm(){
 if (input.val().isok && select.val().ispresent){
   form.submit();
 }else{
  show_errors();
 }
}

为什么不是这样？

Answer 2

也许像这样的东西？

HTML -

<input type="text" id="name" />
<input type="tel" id="phone" />
<button type="button" id="submit">Submit</button>
<div id="errors"></div>

JS -

const user = {}

$('#submit').click(function(){
    // validating form

    if(!$('#name').val()) {
        $('#errors').text('invalid value in "name" field')
        return;
    }    

    if(!$('#phone').val()) {
        $('#errors').text('invalid value in "phone" field')
        return;
    }

    $('#errors').text('');
    user.phone = $('#phone').val();
    user.name = $('#name').val();

    // form submission goes here 
});

逻辑——

一旦函数返回，将阻止执行return表达式本身之后的任何其他内容。

如果不return任何内容，解释器将继续执行下一个表达式。

这使您可以选择在返回和停止函数继续运行之前操作元素和处理错误。