提交时无法验证表单答案

【问题标题】：Unable to validate form on submit提交时无法验证表单
【发布时间】：2015-06-06 15:13:25
【问题描述】：

我正在使用一个名为 liveValidation.js 的小型库。我正在使用它来验证表单中的几个输入。

如果有一些无效的输入，它应该会自动禁用表单按钮，但它不起作用。

这是我的 HTML 代码：

<form method="POST" id="contactForm">
     <label for="name">Name</label>
     <input type="text" name="name" id="contactFormName" value=""/>
     <label for="email">E-Mail</label>
     <input type="text" name="email" id="contactFormEmail" value=""/>
     <label for="message">Your message here</label>
     <textarea name="message" id="contactFormMessage"></textarea>
     <input type="submit" id="submit" value="submit"/>
</form>

这是我初始化 liveValidation.js 的方式：

function liveValidation() {
    var name = new LiveValidation('contactFormName');
    name.add(Validate.Presence);
    var email = new LiveValidation('contactFormEmail');
    email.add(Validate.Presence);
    email.add(Validate.Email);
    var message = new LiveValidation('contactFormMessage');
    message.add(Validate.Presence);
};
$(document).ready(function ($) {
    $("#loadingDiv").hide(400);
    liveValidation();
    sendEmail();
});

这是 AJAX 请求代码：

function sendEmail() {
    var form = $("#contactForm");
    var resultDiv = $(".formResult");
    $("#submit").click(function () {
    $.ajax({
        type: "POST",
        url: "sendEmail.php",
        data: form.serialize()
        }).done (function (){
          resultDiv.addClass('success').html('Message sent successfully')
        }).fail(function () {
          resultDiv.addClass('fail').html("Message not sent. Try again")
        });
     }
  });
};

任何想法为什么这不能正常工作？如果有帮助，这里是 livevalidation 网站 -> http://livevalidation.com/

【问题讨论】：

标签： javascript jquery ajax forms livevalidation

【解决方案1】：

您需要手动检查表单是否有效。为此，您需要一个（任何一个）LiveValidation 对象

试试这个

$(document).ready(function ($) {
    var obj = liveValidation();
   sendEmail(obj);
});

function liveValidation() {
  var name = new LiveValidation('contactFormName');
  name.add(Validate.Presence);
  var email = new LiveValidation('contactFormEmail');
  email.add(Validate.Presence);
  email.add(Validate.Email);
  var message = new LiveValidation('contactFormMessage');
  message.add(Validate.Presence);

  return name;
};

function sendEmail(obj) 
{
    var automaticOnSubmit = obj.form.onsubmit;
    $("#submit").click(function () {
      var valid = automaticOnSubmit();
          if(!valid)
            {
                alert('The form is not valid!');
                 event.preventDefault();
            }
            else
            {
                //submi form
            }
   });
 }

另一种更好的方法，您可以使用任何 LiveValidation 对象来附加事件

$(document).ready(function ($) {
    liveValidation();
    sendEmail();
});

function liveValidation() {
  var name = new LiveValidation('contactFormName');
  name.add(Validate.Presence);
  var email = new LiveValidation('contactFormEmail');
  email.add(Validate.Presence);
  email.add(Validate.Email);
  var message = new LiveValidation('contactFormMessage');
  message.add(Validate.Presence);

  var automaticOnSubmit = name.form.onsubmit;
  name.form.onsubmit = function(){
      var valid = automaticOnSubmit();
      if(valid)
          alert('The form is valid!');
      else
          alert('The form is not valid!');
      return false;
  }

};

function sendEmail() 
{

    $("#submit").click(function () {
       //submit form here
   });
 }

【讨论】：