我是新来的Zurb基金会的概念，并继承了一些工作要做。在一个表单我看到以下

I am new to the Zurb Foundation concept and inherited some work to do. In a form I see the following

<div class="row">
<div class="small-12 column name-field">
<label class="show-for-medium-up">E-Mail-Adresse:*</label>
<input type="text" id="emailAddress" name="emailAddress" value="${requestParameters.emailAddress!}" placeholder="" required pattern="email" />  
<small class="error"><i class="fi-alert"></i>Please provide your email address.</small>
</div>
</div>
<div class="row">
<div class="small-12 column name-field">
<label class="show-for-medium-up">Repeat email address*</label>
<input type="text" name="emailAddressConfirmation" value="${requestParameters.emailAddressConfirmation!}" placeholder="" pattern="email" data-equalto="emailAddress"/>
<small class="error"><i class="fi-alert"></i>The email address don't match</small>
</div>
</div>

我明白这是如何工作的。

I understand how this works.

但现在我必须添加额外的功能，当两个电子邮件地址匹配的电子邮件地址必须在应用程序的数据库中检查是否存在，如果它做它应该显示的下一行 - 标签，字段和消息（提醒），具有以下code：

But now I have to add additional functionality that when the two email addresses match the email address must be checked for existence in the database of the app and if it does it should show the next row - label, field and the message (alert), with following code:

<div class="row">
<div class="small-12 column name-field">
<label>Id code:</label>
<input type="text" name="idCode" value="${requestParameters.idCode!}" placeholder="" required/>
<small class="error"><i class="fi-alert"></i>This email address already exists. Please provide your ID code.</small>
</div>
</div>

现在的问题是：我如何做到这一点？

The question is: how do I make this happen?

的问候，并在此先感谢

推荐答案

的您可以添加自定义验证：

$(document).foundation({
  abide : {
    validators: {
      notInUse: function(el, required, parent) {
        return myDBValidation(el.val); //  returns true or false. el is the element.
      }
    }
  }
});

然后使用它像一个标准：

Then use it like a standard one:

<input type="email" data-abide-validator="notInUse">

我没有找到一个方法来执行现场异步的验证，你可以这样做：   在功能 myDBValidation（el.val）; 检查无效邮件的局部图（高速缓存），如果验证的电子邮件是不存在的，那么执行Ajax查询数据库此电子邮件和返回真。在Ajax回调，如果电子邮件是无效的，将其添加到地图中，并触发与 $（＃MyElement）验证触发（变）; 此时间的电子邮件地址将是无效的电子邮件缓存和验证将失败。

I didn't find a way to perform asynchronous validation of a field, but you can do this: In the function myDBValidation(el.val);check the local map(cache) of invalid emails and if the validated email isn't there, then perform Ajax query to the DB for this email and return true. In the Ajax callback, if the email was invalid, add it to the map and trigger the validation with $("#MyElement").trigger("change"); This time the email address will be in the invalid email cache and the validation will fail.