无法验证表单提交

Question

我正在使用一个名为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/

Answer 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 
    }); 
}