如何使用 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任何內容，解釋器將繼續執行下一個表達式。

這使您可以選擇在返回和停止函數繼續運行之前操作元素和處理錯誤。