## Abide Demo
-These input types create a text field: `text`, `date`, `datetime`, `datetime-local`, `email`, `month`, `number`, `password`, `search`, `tel`, `time`, `url`, and `week`. Note the use of the novalidate attribute to disable any browser validation that could conflict with Abide.
+These input types create a text field: `text`, `date`, `datetime`, `datetime-local`, `email`, `month`, `number`, `password`, `search`, `tel`, `time`, `url`, `website` and `week`. Note the use of the novalidate attribute to disable any browser validation that could conflict with Abide.
```html_example
<form data-abide novalidate>
</div>
<div class="row">
<div class="medium-6 columns">
- <label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <input type="text" placeholder="http://foundation.zurb.com" pattern="url">
+ <label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
+ <input type="text" placeholder="http://zurb.com or zurb.com" pattern="website">
</label>
</div>
<div class="medium-6 columns">
`time`,
`url`
+Apart from these standard patterns, we have a `website` pattern too which is basically a combo of both `domain` and `url` pattern and we recommend you to use this `website` pattern for validating websites.
+
They are defined by regular expressions as you can see below. Note, that the patterns that relate to text such as `alpha` and `alpha_numeric` do not consider special characters from other languages. You need to add these special characters yourself to the regular expressions. For instance, for the German language you need to add:
```JS
// #FFF or #FFFFFF
color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
+
+// Domain || URL
+website: {
+ test: (text) => {
+ return Abide.defaults.patterns['domain'].test(text) || Abide.defaults.patterns['url'].test(text);
+ }
+}
```
day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
// #FFF or #FFFFFF
- color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
+ color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
+
+ // Domain || URL
+ website: {
+ test: (text) => {
+ return Abide.defaults.patterns['domain'].test(text) || Abide.defaults.patterns['url'].test(text);
+ }
+ }
},
/**