使用twitter bootstrap添加ajax验证结果的更简单/更好的方法

时间:2012-08-11 07:01:38

标签: jquery twitter-bootstrap

  

可能重复:
  How to use Twitter Bootstrap popovers for jQuery validation notifications?

我一直在我的项目中使用twitter bootstrap一段时间了。在我目前的所有用例中,表单提交导致服务器的完整往返...即没有ajax。因此,在div和'help-inline'跨度及其文本中插入'error'类非常简单。

现在我正在重构以尽可能支持ajax。

现在提交表单时,根据服务器的响应,我必须添加类'错误'并为跨度设置文本。我创建了一个jsfiddle(http://jsfiddle.net/kinjal/ja9gA/35/)来展示这个。

反复点击注册按钮会随机点亮电子邮件和/或密码div。这是有效的...至少它看起来是有效的。随机部分是模拟提交到服务器并从那里接收错误。

代码的结构是:

clear the state (remove error class, reset help text, hide help)
send data to server
if any errors show the errors (add error class, add help text, show help)

这里的一个问题是,当字段数增加时,此代码将变长。

还有其他问题吗?还有更好的方法吗?

建议可以包含来自服务器的响应格式,以便于解析/处理。

1 个答案:

答案 0 :(得分:0)

我强烈建议您使用jquery validate来做你正在做的事情。你说你拥有代码的字段越多,你当前处理它的方式就越混乱。

一旦包含了jquery validate,您就可以根据类名添加规则。例如,你可以拥有。

<input name="email" class="required" />

并在您的提交按钮上,在将其发送到服务器之前,您可以通过简单地检查表单是否有效

if($('#registerform').valid()) //returns true/false

jquery validate附带了一些基本的验证方法(电子邮件验证就是其中之一)

所以你可以做到

<input name="email" class="required email" />

这将确保该字段不是空白,并且在将其提交给服务器之前它是有效的电子邮件地址。

如果您需要创建更多自定义方法,您可以选择根据类添加更多验证。

如果是密码强度,则看起来像jquery validate also has a method you can add that handles that as well