Custom validators

<h1>Custom validators</h1>
<h3>Simple ajax request</h3>
<form data-parsley-validate="">
  <label for="zip">US Zip Code * :</label>
  <input name="zip" required="" data-parsley-type="digits" data-parsley-length="[5,5]" data-parsley-zip="us">
  <br>
  <input type="submit" value="validate">

  <p><small>* This checks the actual existence of a zip code using ajax (e.g.: 00001 is not an actual US Zip code).</small></p>
</form>

<h3>Complex ajax handling</h3>
<form class="complex">
  <fieldset data-parsley-state-and-zip="us" data-parsley-validate-if-empty="" data-parsley-errors-container=".error">
    <h4>Location</h4><span class="error"></span>
    <label for="state">US State:</label>
    <select name="state" required="">
      <option value="" disabled="" selected="" hidden="">Select a US State...</option>
      <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District Of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
    </select>
    <br>
    <label for="state">Zip:</label>
    <input name="zip" required="" data-parsley-type="digits" data-parsley-length="[5,5]" data-parsley-zip="us">
  </fieldset>
  <br>
  <input type="submit" value="validate">

  <p><small>* A complete example showing Ajax, promise chaining, dynamic custom error message, interdependent fields.</small></p>
</form>

<script type="text/javascript">
Parsley.addValidator('zip', {
  validateString: function(value, country) {
    // Zippopotam.us returns a status 404 for incorrect zip codes,
    // so we simply return the ajax request:
    return $.ajax('//www.zippopotam.us/' + country + '/' + value)
  },
  messages: {en: 'There is no such zip for the country "%s"'}
});
Parsley.addValidator('stateAndZip', {
  validateString: function(_ignoreValue, country, instance) {
    var state = instance.$element.find('[name="state"]').val();
    var zip = instance.$element.find('[name="zip"]').val();
    var xhr = $.ajax('//www.zippopotam.us/' + country + '/' + zip)
    // When Zippopotam.us returns the info of the given zip, check it:
    return xhr.then(function(json) {
      var actualState = json.places[0]['state abbreviation'];
      if (actualState !== state) {
        // We could return `false`, but for an even better result
        // we can fail the promise with a custom error message:
        return $.Deferred().reject("The zip code " + zip + " is in " + actualState + ", not in " + state);
        // Note: in jQuery 3.0+, you can `throw('my custom error')` for the same result
      }
    })
  },
  // The following error message will still show if the xhr itself fails
  // (404 because zip does not exist, network error, etc.)
  messages: {en: 'There is no such zip for the country "%s"'}
});
$(function() {
  $('.complex').parsley({
    inputs: Parsley.options.inputs + ',fieldset'
  })
});
Parsley.on('form:submit', function() {
  return false; // Don't submit form for this demo
});
</script>