Ajax表單驗證問題，無需刷新頁面

Question

我的頁面上有兩種形式，我隱藏了一個myForm，提交時使用ajax顯示其他otherForm。

爲此，我需要執行功能submit_form(); onclick。由於這是在沒有使用jQuery和Ajax刷新頁面的情況下提交的，如果這些字段爲空，表單myForm將被隱藏而不發送數據。

如何防止表單在提交之前隱藏或驗證其字段？

這是我的形式：

<form id="myForm" method="post"> 
Name: <input name="name" id="name" type="text" /><br /> 
Email: <input name="email" id="email" type="text" /><br /> 
<input class="newsletter" type="button" id="submitForm" value="Send" onclick="submit_form();"/> 

這是submit_form功能：

function submit_form() { 
    var values = {}; 
    $.each($('#myForm').serializeArray(), function(i, field) { 
     values[field.name] = field.value; 
    }); 
    $('#myForm').hide(); 
    $('#otherForm').show(); 
    var name = $("#name").val(); 
    var email = $("#email").val(); 

    $.post("submit.php", { name: name, email: email, }, 
    function(data) { 
    $('#results').html(data); 
    }); 
} 

Answer 1

檢查對象值存在或不使用Array#filter長度

function submit_form() { 
 
    var values = {}; 
 
    $.each($('#myForm').serializeArray(), function(i, field) { 
 
    values[field.name] = field.value.trim(); 
 
    }); 
 

 
    if(Object.values(values).filter(a => !a).length > 0){ 
 
    return false 
 
    } 
 
    console.log(values) 
 
    $('#myForm').hide(); 
 
    $('#otherForm').show(); 
 
    var name = $("#name").val(); 
 
    var email = $("#email").val(); 
 

 
    $.post("submit.php", { 
 
     name: name, 
 
     email: email, 
 
    }, 
 
    function(data) { 
 
     $('#results').html(data); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" method="post"> 
 
    Name: <input name="name" id="name" type="text" /><br /> Email: <input name="email" id="email" type="text" /><br /> 
 
    <input class="newsletter" type="button" id="submitForm" value="Send" onclick="submit_form();" />