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

使用$ .data（）向表单添加一些标记，或者在触发错误后添加类似有效或无效的类
检查这样的标志：

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

        if ($(this).hasClass('invalid') {
           // error handling
        } else{
           // your ajax call
        }
        e.preventDefault();
    }

Answer 2

尝试关注

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

    if ($(this).hasClass('invalid') {
       // error handling
    } else{
       // your ajax call
    }
    e.preventDefault();
}

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

2 个答案: