Question

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

<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>

我理解这是如何运作的。

但是现在我必须添加额外的功能，当两个电子邮件地址匹配时，必须检查应用程序数据库中是否存在电子邮件地址，如果存在，则应显示下一行 - 标签，字段和消息（警报），包含以下代码：

<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>

问题是：我该如何实现这一目标？

问候，并提前感谢

Answer 1

You can add a custom validator:

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

然后像标准的那样使用它：

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

我没有找到一种方法来执行字段的异步验证，但是你可以这样做：
在函数myDBValidation(el.val);中检查无效电子邮件的本地映射（缓存），如果验证的电子邮件不在那里，则对此电子邮件执行Ajax查询，然后返回true。在Ajax回调中，如果电子邮件无效，请将其添加到地图并使用$("#MyElement").trigger("change");触发验证。这次电子邮件地址将位于无效的电子邮件缓存中，验证将失败。

基金会电子邮件验证ajax

1 个答案: