Look into using Constraint Validation for Nebula form validation [🟩 fully supported now]

[chrisblakley]

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Complex_constraints_using_HTML5_Constraint_API

Currently Nebula uses data attributes to manage real-time validation, but as browser support grows, consider switching over to (or also using) setCustomValidity() which will add custom messages to HTML5 validation messages.

Not supported in IE11, but works in all other browsers. Could implement as a progressive enhancement. https://caniuse.com/#feat=constraint-validation

[chrisblakley]

From the documentation on HTML5 Constraint API:

function checkZIP() {
  // For each country, defines the pattern that the ZIP has to follow
  var constraints = {
    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
  };
  
  // Read the country id
  var country = document.getElementById("Country").value;

  // Get the NPA field
  var ZIPField = document.getElementById("ZIP");

  // Build the constraint checker
  var constraint = new RegExp(constraints[country][0], "");
    console.log(constraint);


  // Check it!
  if (constraint.test(ZIPField.value)) {
    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
    ZIPField.setCustomValidity("");
  }
  else {
    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
    // give a message about the format required for this country
    ZIPField.setCustomValidity(constraints[country][1]);
  }
}

[chrisblakley]

This is now fully supported.