如果字段为空白或使用Safari，如何停止提交Ajax表单？

Question

简要说明：

我的表单使用jQuery验证客户端，使用php验证并处理服务器端，使用ajax提交，停止页面刷新，并在提交后清除表单。

问题：如果缺少表单字段（所有浏览器）并且完全空白（Safari），则表单仍会提交。

我的问题是，如果全部或部分字段为空白，如何阻止表单继续进行提交？

非常感谢所有帮助，谢谢。

HTML表单：

    <div id="form">
  <form name="form" action="form_process.php" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="fname" name="fName" value="<?php echo $_GET['fName'];?>" placeholder="First Name" />
    </p>
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="lName" name="lName" value="<?php echo $_GET['lName'];?>" placeholder="Last Name" />
    </p>
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="email" name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" />
    </p>
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="subject" name="subject" value="<?php echo $_GET['subject'];?>" placeholder="Subject" />
    </p>
    <p>
      <textarea name="message" rows="6" cols="38" required="required" id="message" placeholder="Message"></textarea>
    </p>
    <br />
    <input type="submit" value="Submit" name="submit" />
    <input type="reset" value="Clear" name="clear" />
  </form>
</div>

jQuery验证：

//form validation starts here


function validateForm(){

//first name field  
var a=document.forms["form"]["fName"].value;
if (a==null || a=="")
  {
  alert("Please enter your first name.");
  return false;
  }

//last name field
var b=document.forms["form"]["lName"].value;
if (b==null || b=="")
  {
  alert("Please enter your last name.");
  return false;
  }

//email address field
var c=document.forms["form"]["email"].value;
var atpos=c.indexOf("@");
var dotpos=c.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)
  {
  alert("Please enter a valid e-mail address");
  return false;
  }

//subject field
var d=document.forms["form"]["subject"].value;
if (d==null || d=="")
  {
  alert("Please enter a subject.");
  return false;
  }

//message field
var e=document.forms["form"]["message"].value;
if (e==null || e=="")
  {
  alert("Please enter a message.");
  return false;
  }
}//validation ends

$(function () {

    $('form').on('submit', function (e) {

          $.ajax({
            type: 'post',
            url: 'form_process.php',
            data: $('form').serialize(),
            success: function () {
                alert('Your message has been submitted.  You will be contacted shortly, thank you.');
                $('form')[0].reset();//clear form after submit success
            }//success ends
          });//ajax ends
         e.preventDefault();//prevent default page refresh
        });//submit ends
});//function ends

Answer 1

1. 一旦发生错误之一，就使用$ .data（）向表单添加一些标志，或者向其添加有效或无效的类

2. 像这样检查此标志：

    $（form）.on（'submit'，function（）{        如果（$（this）.hasClass（'invalid'）{           //错误处理        }其他{           //您的ajax调用        }        e.preventDefault（）;    }

Answer 2

这是一个非常简单的函数，如果任何输入为空，则使表单无效：

     function validateForm(data){
         var is_valid = true;
         $.each(data, function(id, obj) {
             if(obj.value === "") {
                 is_valid = false;
             }
         });   
         return is_valid;         
     }

data参数应为json序列化形式。

用法：

    var form_data = $( "#my_form" ).serializeArray();
    var is_valid = validateForm(form_data);

    if(is_valid === true){
        // your ajax code
    }