How do Zurb-Foundation 6 / Abide custom validation patterns work?

1k Views Asked by At

I want to create my own custom pattern so as to validate fields using the Abide plugin for the Foundation 6 framework however, I cannot find any resources indicating the required syntax for creating patterns.

This is an example of a standard Abide pattern for validating an email field:

email : /^[a-zA-Z0-9.!#$%&\'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,

The pattern I require is for a field with numbers only however, it must not have any leading zeros.

Where can I find information so as to help me understand how to create this?

1

There are 1 best solutions below

0
inginia On

Add this to your Javascript:

Foundation.Abide.defaults.patterns['no_leading_zero_number'] = /^[1-9]\d*/;

Then use like this:

<input id="phone" type="text" pattern="no_leading_zero_number">

The regex /^[1-9]\d*/ matches number without any leading zero.

I encourage you to take a look at Foundation docs, it's a well written guide.