This is just a proof of concept!
As challenged by a tweet, 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.
The type triggers the predefined validators.
<input type="email" />
The name is required to link validation messages and request data.
<input type="email" name="email" />
The required attribute triggers the not empty validation.
<input type="email" name="email" required />
<input type="email" name="email" required="required" />
<input type="email" name="email" aria-required="true" />
Reuse the submitted value and inject it as a value.
<input type="text" name="username" data-reuse-submitted-value="true" value="submitted-user-name" />
Apply filters to the submitted value. Multiple
standard filters
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.
<input type="text" name="username" value="" data-filters="stringtrim|alpha" />
Add extra validators. Multiple
standard validators
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.
<input type="text" name="username" value=""
data-validators="stringlength{min:2,max:140}|validator{key:val,foo:bar}|notempty" />
Sometimes you need to validate javascript generated from fields. This is easy with the data-input-name
and
data-validators
attributes.
<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>
The form validator detects HTML5 form elements and adds default validators depending on the used attributes.
No default validators.
<input type="text" name="firstName" value="" />
Default email validator.
<input type="email" name="email" value="" data-validator-use-mx-check="true" />
-
Attribute: data-validator-use-mx-check
Use mx check to validate the domain.
The validator that is applied depends on if min
and / or max
is set.
<input type="number" name="rating" value="" min="1" max="10" />
-
Attribute: min && max
The submitted value must be between the set min and max.
-
Attribute: min
The submitted value must be equal or greater than the set min.
-
Attribute: max
The submitted value must be equal or lower than the set max.
$htmlForm = <<<'HTML'
<form action="%s" method="post">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
value=""
aria-describedby="email-description"
data-reuse-submitted-value="true"
data-validator="email-address"
required="required"
/>
<span id="email-description" class="help">Enter a valid email address</span>
<input
type="number"
id="intNumber"
name="intNumber"
value=""
min="1"
max="20"
data-reuse-submitted-value="true"
data-validator="between"
/>
<input
type="text"
name="username"
value=""
data-reuse-submitted-value="true"
data-filters="stringtrim,alpha"
/>
<input type="submit"/>
</form>
HTML;
$form = FormFactory::fromHtml($htmlForm);
$_POST['email'] = 'test@localhost';
$_POST['intNumber'] = 22;
$_POST['username'] = ' xtreamwayz 22 ';
var_dump($form->validate($_POST)); // returns form validation result VO
echo $form->asString();