<commit_before># html-form-validator

[![Build Status](https://travis-ci.org/xtreamwayz/html-form-validator.svg?branch=master)](https://travis-ci.org/xtreamwayz/html-form-validator)
[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/?branch=master)
[![Code Coverage](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/?branch=master)

**NOTE: This is a proof of concept. Use at your own risk!**

---

As challenged by a [tweet](https://twitter.com/Ocramius/status/680817040429592576), this should validate a html form.

It's pretty crazy what you have to do to get a form build. Create a lot of php classes for elements, validation,
etc. So why not build a html5 form and use the standard element attributes to generate the validator and filters.
Together with some powerful html compliant data attributes you can create forms, validation and filters in one place.

A prototype can be seen in action over [here](https://github.com/xtreamwayz/xtreamwayz.com/blob/master/src/App/Action/ContactAction.php).

## Installation

```bash
$ composer require xtreamwayz/html-form-validator
```

## How does it work?

1. **Load the html form into the FormFactory.**
    - The FormFactory automatically creates default validators and filters for all input elements.
    - The FormFactory creates additional validators and filters set by you inside the form with specific data
    attributes.
    - The FormFactory optionally injects default data into the form input elements.
2. **Validate the form against submitted data.**
3. **Render the form.**
    - The FormFactory optionally injects filtered submitted data into the input elements.
    - The FormFactory optionally adds error messages next to the input elements.

## Element attributes

### name / data-input-name="name" *(required)*

The name is required to link validation messages and request data.

```html
<input type="email" name="email_address" />
```

### required / aria-required="true"

The required attribute triggers the not empty validation.

```html
<input type="email" name="email_address" required />
<input type="email" name="email_address" required="required" />
<input type="email" name="email_address" aria-required="true" />
```

### data-reuse-submitted-value

Reuse the submitted value and inject it as a value.

```html
<input type="text" name="username" data-reuse-submitted-value="true" value="xtreamwayz" />
```

### data-filters

Apply filters to the submitted value. Multiple
[standard filters](http://framework.zend.com/manual/current/en/modules/zend.filter.set.html)
can be used, separated by a vertical bar. Options can be set with ``{key:value,min:2,max:140}``.
The attribute will be removed before rendering the form, including any sensitive options.

```html
<input type="text" name="username" value="" data-filters="stringtrim|alpha" />
```

### data-validators

Add extra validators. Multiple
[standard validators](http://framework.zend.com/manual/current/en/modules/zend.validator.set.html)
can be used, separated by a vertical bar. Options can be set with ``{key:value,min:2,max:140}``.
The attribute will be removed before rendering the form, including any sensitive options.

```html
<input type="text" name="username" value=""
       data-validators="stringlength{min:2,max:140}|validator{key:val,foo:bar}|notempty" />
```

### Custom validation

Sometimes you need to validate javascript generated from fields. This is easy with the ``data-input-name`` and
``data-validators`` attributes.

```html
<div class="form-group g-recaptcha" aria-required="true"
     data-input-name="g-recaptcha-response" data-validators="recaptcha{key:{{ recaptcha_priv_key }}}"
     data-sitekey="{{ recaptcha_pub_key }}" data-theme="light"></div>
```

## Element types

The form validator detects HTML5 form elements and adds default validators depending on the used attributes.

```html
<form action="/" method="post">
    <input type="checkbox" name="checkbox" value="value" />

    <input type="color" name="color" />

    <input type="date" name="date" />

    <input type="datetime-local" name="datetime-local" />

    <input type="email" name="email" data-validator-use-mx-check="true" />

    <input type="file" name="file" />

    <input list="browsers" name="browser" />
    <datalist id="browsers">
        <option value="Edge" />
        <option value="Firefox" />
        <option value="Chrome" />
        <option value="Opera" />
        <option value="Safari" />
    </datalist>

    <input type="month" name="month" />

    <input type="number" name="number" min="1" max="5" />

    <input type="password" name="password" required />
    <input type="password" name="password-confirm" required data-validators="identical{token:password}" />

    <input type="radio" name="gender" value="male" /> Male<br />
    <input type="radio" name="gender" value="female" /> Female<br />
    <input type="radio" name="gender" value="other" /> Other

    <input type="range" name="range" min="1" max="10" step="2" />

    <input type="tel" name="tel" data-country="es" />

    <input type="text" name="name" />

    <input type="time" name="time" />

    <input type="url" name="url" />

    <input type="week" name="week" />

    <select name="car">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option><commit_msg>Fix datalist example<commit_after># html-form-validator

[![Build Status](https://travis-ci.org/xtreamwayz/html-form-validator.svg?branch=master)](https://travis-ci.org/xtreamwayz/html-form-validator)
[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/?branch=master)
[![Code Coverage](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/xtreamwayz/html-form-validator/?branch=master)

**NOTE: This is a proof of concept. Use at your own risk!**

---

As challenged by a [tweet](https://twitter.com/Ocramius/status/680817040429592576), this should validate a html form.

It's pretty crazy what you have to do to get a form build. Create a lot of php classes for elements, validation,
etc. So why not build a html5 form and use the standard element attributes to generate the validator and filters.
Together with some powerful html compliant data attributes you can create forms, validation and filters in one place.

A prototype can be seen in action over [here](https://github.com/xtreamwayz/xtreamwayz.com/blob/master/src/App/Action/ContactAction.php).

## Installation

```bash
$ composer require xtreamwayz/html-form-validator
```

## How does it work?

1. **Load the html form into the FormFactory.**
    - The FormFactory automatically creates default validators and filters for all input elements.
    - The FormFactory creates additional validators and filters set by you inside the form with specific data
    attributes.
    - The FormFactory optionally injects default data into the form input elements.
2. **Validate the form against submitted data.**
3. **Render the form.**
    - The FormFactory optionally injects filtered submitted data into the input elements.
    - The FormFactory optionally adds error messages next to the input elements.

## Element attributes

### name / data-input-name="name" *(required)*

The name is required to link validation messages and request data.

```html
<input type="email" name="email_address" />
```

### required / aria-required="true"

The required attribute triggers the not empty validation.

```html
<input type="email" name="email_address" required />
<input type="email" name="email_address" required="required" />
<input type="email" name="email_address" aria-required="true" />
```

### data-reuse-submitted-value

Reuse the submitted value and inject it as a value.

```html
<input type="text" name="username" data-reuse-submitted-value="true" value="xtreamwayz" />
```

### data-filters

Apply filters to the submitted value. Multiple
[standard filters](http://framework.zend.com/manual/current/en/modules/zend.filter.set.html)
can be used, separated by a vertical bar. Options can be set with ``{key:value,min:2,max:140}``.
The attribute will be removed before rendering the form, including any sensitive options.

```html
<input type="text" name="username" value="" data-filters="stringtrim|alpha" />
```

### data-validators

Add extra validators. Multiple
[standard validators](http://framework.zend.com/manual/current/en/modules/zend.validator.set.html)
can be used, separated by a vertical bar. Options can be set with ``{key:value,min:2,max:140}``.
The attribute will be removed before rendering the form, including any sensitive options.

```html
<input type="text" name="username" value=""
       data-validators="stringlength{min:2,max:140}|validator{key:val,foo:bar}|notempty" />
```

### Custom validation

Sometimes you need to validate javascript generated from fields. This is easy with the ``data-input-name`` and
``data-validators`` attributes.

```html
<div class="form-group g-recaptcha" aria-required="true"
     data-input-name="g-recaptcha-response" data-validators="recaptcha{key:{{ recaptcha_priv_key }}}"
     data-sitekey="{{ recaptcha_pub_key }}" data-theme="light"></div>
```

## Element types

The form validator detects HTML5 form elements and adds default validators depending on the used attributes.

```html
<form action="/" method="post">
    <input type="checkbox" name="checkbox" value="value" />

    <input type="color" name="color" />

    <input type="date" name="date" />

    <input type="datetime-local" name="datetime-local" />

    <input type="email" name="email" data-validator-use-mx-check="true" />

    <input type="file" name="file" />

    <input type="month" name="month" />

    <input type="number" name="number" min="1" max="5" />

    <input type="password" name="password" required />
    <input type="password" name="password-confirm" required data-validators="identical{token:password}" />

    <input type="radio" name="gender" value="male" /> Male<br />
    <input type="radio" name="gender" value="female" /> Female<br />
    <input type="radio" name="gender" value="other" /> Other

    <input type="range" name="range" min="1" max="10" step="2" />

    <input type="tel" name="tel" data-country="es" />

    <input type="text" name="name" />

    <input type="text" name="browser" list="browsers" />
    <datalist id="browsers">
        <option value="Edge" />
        <option value="Firefox" />
        <option value="Chrome" />
        <option value="Opera" />
        <option value="Safari" />
    </datalist>

    <input type="time" name="time" />

    <input type="url" name="url" />

    <input type="week" name="week" />

    <select name="car">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
{'fraction_non_alphanumeric': 0.14809867307863567, 'fraction_numerical': 0.007302520260040965, 'mean_word_length': 4.49412915851272, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1580373', 'n_tokens_mistral': 3470, 'n_tokens_neox': 3343, 'n_words': 972}