ajax表单提交前的验证答案

【问题标题】：validation before ajax form submissionajax表单提交前的验证
【发布时间】：2011-02-22 05:43:07
【问题描述】：

如何在 remote_form_for 提交之前引入验证？

我有一个名为 validateForm() 的 JavaScript 函数。我可以在 AJAX 请求过程之前调用它。我尝试使用 return false 和 event.preventDefault。但是好像没什么效果。这是我的代码的样子

<% remote_form_for :customer, :update =>"uxScreenLoaderDiv", :url => {:action => "login", :controller => "site"},  :onsubmit => "validateForm(event)" do |f| %>
    User name : <%= f.text_field "uxUserName", :class => "TextBox", :style => "width:100px;" %>&nbsp;*
    &nbsp;Password : <%= f.password_field "uxPassword", :class => "TextBox", :style => "width:100px;" %>&nbsp;*
    <%= f.submit "Go!", :class => "Button-Simple", :id => "uxSubmitButton" %>   
<% end %>

javascript函数简单如下

function validateForm(event){
   return false;
   //event.preventDefault();
}

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

试试这个

<% remote_form_for :customer, :update =>"uxScreenLoaderDiv", :url => {:action => "login", :controller => "site"}, :html => {:id => "uxLoginForm"}, :onsubmit => "return validateForm(event)" do |f| %>

即改变

 :onsubmit => "validateForm(event)

到

 :onsubmit => "return validateForm(event)

编辑应该是

<% remote_form_for :customer, :update =>"uxScreenLoaderDiv", 
         :url => {:action => "login", :controller => "site"}, 
         :html => {:id => "uxLoginForm", :onsubmit => "return validateForm(event)"} 
         do |f|
 %>

再次编辑

为什么不使用 :condition 呢？像关注

<% remote_form_for :customer, :update =>"uxScreenLoaderDiv", 
         :url => {:action => "login", :controller => "site"}, 
         :html => {:id => "uxLoginForm"},
         :condition=>"validateForm(event)!=false"
         do |f|
 %>

【讨论】：

使用 return validateForm(event) 只会使它成为一个普通的表单，并使表单与 ajax 请求一致
请检查我的“再次编辑”并告诉我会发生什么。

【解决方案2】：

我认为您正在寻找类似 onSubmit="return validateForm(this)" 或类似的东西。然后，如果验证返回 false（因为验证失败），则表单不应提交。

【讨论】：

我之前试过..有问题...如果返回值为true，则表单直接提交，不再是AJAX请求
如果您只是尝试执行纯 AJAX 请求，则不需要提交按钮。您可以只使用普通的“按钮”类型输入，例如并使用 onClick 处理程序。

【解决方案3】：

您可能想要检查 LIvevalidation 插件 (http://github.com/augustl/live-validations)，您可以使用活动记录验证来执行 Ajax

还有非 ajax 验证总是好的（即使你使用 ajax 验证），因为 ajax 在禁用 javascript 的浏览器中不起作用

干杯，同龄人

【讨论】：

好提示：我已经为此使用了 jquery.validate 插件；但必须手动复制我的验证。