Foundation email validation ajax

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.

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?

Regards, and thanks in advance

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

Then use it like a standard one:

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

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.