metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Makes simple client-side form validation easy, whilst still offering plenty of customization options."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Validator - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Validator</a></li> <li class="toc-entry"><a href="#_validator_how_to">How to</a></li> <li class="toc-entry"><a href="#_validator_feedback">Invalid feedback</a></li> <li class="toc-entry"> <a href="#_validator_funcs">Functions</a> <ul> <li class="toc-entry"><a href="#_validator_func_required">Required</a></li> <li class="toc-entry"><a href="#_validator_func_length">Length</a></li> <li class="toc-entry"><a href="#_validator_func_minlength">Min length</a></li> <li class="toc-entry"><a href="#_validator_func_maxlength">Max length</a></li> <li class="toc-entry"><a href="#_validator_func_min">Min value</a></li> <li class="toc-entry"><a href="#_validator_func_max">Max value</a></li> <li class="toc-entry"><a href="#_validator_func_email">Email</a></li> <li class="toc-entry"><a href="#_validator_func_domain">Domain</a></li> <li class="toc-entry"><a href="#_validator_func_url">Url</a></li> <li class="toc-entry"><a href="#_validator_func_date">Date</a></li> <li class="toc-entry"><a href="#_validator_func_number">Number</a></li> <li class="toc-entry"><a href="#_validator_func_integer">Integer</a></li> <li class="toc-entry"><a href="#_validator_func_float">Float</a></li> <li class="toc-entry"><a href="#_validator_func_digits">Digits</a></li> <li class="toc-entry"><a href="#_validator_func_hexcolor">Hex color</a></li> <li class="toc-entry"><a href="#_validator_func_color">Color</a></li> <li class="toc-entry"><a href="#_validator_func_pattern">Pattern</a></li> <li class="toc-entry"><a href="#_validator_func_compare">Compare</a></li> <li class="toc-entry"><a href="#_validator_func_not">Not</a></li> <li class="toc-entry"><a href="#_validator_func_notequals">NotEquals</a></li> <li class="toc-entry"><a href="#_validator_func_equals">Equals</a></li> <li class="toc-entry"><a href="#_validator_func_custom">Custom</a></li> </ul> </li> <li class="toc-entry"><a href="#_validator_functions_mode">Functions mode</a></li> <li class="toc-entry"><a href="#_validator_events">Events</a></li> <li class="toc-entry"><a href="#_validator_submit">Submit</a></li> <li class="toc-entry"><a href="#_validator_error_handling">Error handling</a></li> <li class="toc-entry"><a href="#_validator_interactive">Interactive check</a></li> <li class="toc-entry"><a href="#_validator_outside">Validating without a form</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Validator</h1> <p class="text-leader"> Makes simple client-side form validation easy, whilst still offering plenty of customization options. The widget comes bundled with a useful set of validation methods, including URL, email, hex color, min and max values, length validation. </p>  <h3 id="_validator_how_to">How to</h3> <p> To activate Validator add attribute <code>data-role="validator"</code> to form and define validation functions over attribute <code>data-validate="..."</code> for inputs. </p> <p> Supported elements: <code>input</code>, <code>select</code>, <code>textarea</code>, <code>checkbox</code>, <code>switch</code> and <code>radio</code>. For <code>checkbox</code>, <code>switch</code> and <code>radio</code> you can use only <code>required</code> validation function. More about form elements read in <a href="forms.html">this article</a>. </p> <div class="example"> <form data-role="validator" action="javascript:"> <div class="row mb-2"> <div class="cell-md-6"> <label>First name</label> <input type="text" data-validate="required minlength=6" placeholder="Enter first name"> <span class="invalid_feedback"> Input correct name with min length 6 symbols </span> </div> <div class="cell-md-6"> <label>Email</label> <input type="email" data-validate="required email" placeholder="Enter email" data-role="input"> <span class="invalid_feedback">Input correct email address</span> </div> </div> <div class="mt-2 mb-2"> <label>Select option</label> <select data-role="select" data-validate="required not=-1"> <option value="-1" class="d-none"></option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <span class="invalid_feedback">You must select a option!</span> </div> <div class="row mb-2"> <div class="cell-md-6"> <input type="checkbox" data-role="checkbox" data-caption="I accept the terms" data-validate="required"> <span class="invalid_feedback">You must accept this!</span> </div> <div class="cell-md-6"> <input type="radio" name="__r1" data-role="radio" value="1" data-validate="required" data-caption="Type 1"> <input type="radio" name="__r1" data-role="radio" value="2" data-validate="required" data-caption="Type 2"> <input type="radio" name="__r1" data-role="radio" value="3" data-validate="required" data-caption="Type 3"> <span class="invalid_feedback">You must select a option!</span> </div> </div> <button class="button primary">Submit</button> </form> </div> <pre class=""><code> <form data-role="validator" action="javascript:"> <div class="row mb-2"> <div class="cell-md-6"> <label>First name</label> <input type="text" data-validate="required minlength=6" placeholder="Enter first name"> <span class="invalid_feedback"> Input correct name with min length 6 symbols </span> </div> <div class="cell-md-6"> <label>Email</label> <input type="email" data-validate="required email" placeholder="Enter email" data-role="input"> <span class="invalid_feedback"> Input correct email address </span> </div> </div> <div class="mt-2 mb-2"> <label>Select option</label> <select data-role="select" data-validate="required not=-1"> <option value="-1" class="d-none"></option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <span class="invalid_feedback"> You must select a option! </span> </div> <div class="row mb-2"> <div class="cell-md-6"> <input type="checkbox" data-role="checkbox" data-caption="I accept the terms" data-validate="required"> <span class="invalid_feedback"> You must accept this! </span> </div> <div class="cell-md-6"> <input type="radio" name="__r1" data-role="radio" value="1" data-validate="required" data-caption="Type 1"> <input type="radio" name="__r1" data-role="radio" value="2" data-validate="required" data-caption="Type 2"> <input type="radio" name="__r1" data-role="radio" value="3" data-validate="required" data-caption="Type 3"> <span class="invalid_feedback" >You must select a option! </span> </div> </div> <button class="button primary">Submit</button> </form> </code></pre> <h4>Validating radio</h4> <p> To validate <code>radio</code> component you must add attribute <code>name</code> to element and use validate function <code>required</code>. Validate function must be added to all radio element. </p> <pre><code class="html"> <input type="radio" name="__r1" data-role="radio" value="1" data-validate="required" data-caption="Type 1"> <input type="radio" name="__r1" data-role="radio" value="2" data-validate="required" data-caption="Type 2"> <input type="radio" name="__r1" data-role="radio" value="3" data-validate="required" data-caption="Type 3"> </code></pre> <h4>Validating select</h4> <p> To validate <code>select</code> component you must add specific first option and use validate functions <code>required</code> and <code>not</code>. </p> <pre><code class="html"> <select data-role="select" data-validate="required not=-1"> <option value="-1" class="d-none"></option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> </code></pre> <h3 id="_validator_feedback">Invalid feedback</h3> <p> You can create user-friendly <strong>invalid feedback</strong>. To create it, add element with class <code>.invalid_feedback</code> after input. </p> <div class="example"> <form data-role="validator" action="javascript:"> <div class="mb-2"> <label>Email</label> <input type="email" data-validate="required email" placeholder="Enter email" data-role="input"> <span class="invalid_feedback">Input correct email address</span> </div> <button class="button">Send</button> </form> </div> <pre><code class="html"> <label>Email</label> <input type="email" data-validate="required email" placeholder="Enter email" data-role="input"> <span class="invalid_feedback"> Input correct email address </span> </code></pre> <h3 id="_validator_funcs">Functions</h3> <p> Metro 4 Validator supports 12 validation functions. To define validation for input add to input attribute <code>data-validate="..."</code>. You can combine validation functions. To set function argument use record <code>func_name=arg</code>. </p> <div class="example"> <form data-role="validator" action="javascript:"> <div class="form-group"> <label>Input name (<small>required</small>)</label> <input type="text" data-validate="required" name="nickname"> </div> <div class="form-group"> <label>Input age (<small>required number</small>)</label> <input type="text" data-validate="required number" name="age"> </div> <div class="form-group"> <label>Input pin (<small>required digits length=4</small>)</label> <input type="text" data-validate="required digits length=4" name="pin"> </div> <div class="form-group"> <label>Input password (<small>required</small>)</label> <input type="password" data-validate="required" name="pass1"> </div> <div class="form-group"> <label>Input password again (<small>required compare=pass1</small>)</label> <input type="password" data-validate="required compare=pass1" name="pass1_1"> <span class="invalid_feedback"> Pass1 and Pass2 must be equal. </span> </div> <br /> <button class="button success">Submit</button> </form> </div> <pre class=""><code> <form data-role="validator" action="javascript:"> <div class="form-group"> <label>Input name</label> <input type="text" data-validate="required" name="nickname"> </div> <div class="form-group"> <label>Input age</label> <input type="text" data-validate="required number" name="age"> </div> <div class="form-group"> <label>Input pin</label> <input type="text" data-validate="required digits length=4" name="pin"> </div> <div class="form-group"> <label>Input password</label> <input type="password" data-validate="required" name="pass1"> </div> <div class="form-group"> <label>Input password again</label> <input type="password" data-validate="required compare=pass1" name="pass2"> <span class="invalid_feedback"> Pass1 and Pass2 must be equal. </span> </div> <br /> <button class="button success">Submit</button> </form> </code></pre> <h4>Validate functions</h4> <p> You can use next functions for validating input value: <code>required</code>, <code>length</code>, <code>minlength</code>, <code>maxlength</code>, <code>min</code>, <code>max</code>, <code>email</code>, <code>domain</code>, <code>url</code>, <code>date</code>, <code>number</code>, <code>digits</code>, <code>hexcolor</code>, <code>color</code>, <code>pattern</code>, <code>compare</code>. <code>not</code>, <code>notequals</code> and <code>custom</code>. </p> <ul class="unstyled-list mt-2"> <li id="_validator_func_required"> <strong>required</strong> - mark field as required. Value can not be empty. <pre><code> <input type="text" data-validate="required"> </code></pre> </li> <li id="_validator_func_length"> <strong>length</strong> - set length for value in symbols <pre><code> <input type="text" data-validate="length=4"> </code></pre> </li> <li id="_validator_func_minlength"> <strong>minlength</strong> - set min length for value in symbols <pre><code> <input type="text" data-validate="minlength=4"> </code></pre> </li> <li id="_validator_func_maxlength"> <strong>maxlength</strong>: set max length for value in symbols <pre><code> <input type="text" data-validate="maxlength=4"> </code></pre> </li> <li id="_validator_func_min"> <strong>min</strong> - value must be great or equal then <code>min</code> <pre><code> <input type="text" data-validate="min=4"> </code></pre> </li> <li id="_validator_func_max"> <strong>max</strong>: value must be less or equal then <code>max</code> <pre><code> <input type="text" data-validate="max=4"> </code></pre> </li> <li id="_validator_func_email"> <strong>email</strong> - value must be a valid email <pre><code> <input type="text" data-validate="email"> </code></pre> </li> <li id="_validator_func_domain"> <strong>domain</strong> - value must be a valid domain name <pre><code> <input type="text" data-validate="domain"> </code></pre> </li> <li id="_validator_func_url"> <strong>url</strong> - valid url required <pre><code> <input type="text" data-validate="url"> </code></pre> </li> <li id="_validator_func_date"> <strong>date</strong> - valid date required <pre><code> <input type="text" data-validate="date" data-value-format="_format_input_date_"> </code></pre> </li> <li id="_validator_func_number"> <strong>number</strong> - value must be a number <pre><code> <input type="text" data-validate="number"> </code></pre> </li> <li id="_validator_func_integer"> <strong>number</strong> - value must be a integer <pre><code> <input type="text" data-validate="integer"> </code></pre> </li> <li id="_validator_func_float"> <strong>number</strong> - value must be a float <pre><code> <input type="text" data-validate="float"> </code></pre> </li> <li id="_validator_func_digits"> <strong>digits</strong>: value must contains only digits <pre><code> <input type="text" data-validate="digits"> </code></pre> </li> <li id="_validator_func_hexcolor"> <strong>hexcolor</strong> - value must be a valid hex color <pre><code> <input type="text" data-validate="hexcolor"> </code></pre> </li> <li id="_validator_func_color"> <strong>color</strong> - value must contains standard color name <pre><code> <input type="text" data-validate="color"> </code></pre> </li> <li id="_validator_func_pattern"> <strong>pattern</strong> - value must be equal with regex pattern. Currently regex modifiers not supported. Parsing regex modifiers will be added in next version. <pre><code> <input type="text" data-validate="pattern=(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)"> </code></pre> </li> <li id="_validator_func_compare"> <strong>compare</strong> - value must be equal to compared input <pre><code> <input type="password" data-validate="required" name="pass1"> <input type="password" data-validate="required compare=pass1" name="pass2"> </code></pre> </li> <li id="_validator_func_not"> <strong>not</strong> - value must not be equal to compared value <pre><code> <select data-role="select" data-validate="required not=-1"> <option value="-1" class="d-none"></option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> </code></pre> </li> <li id="_validator_func_notequals"> <strong>notequals</strong> - value must not be equal to compared input <pre><code> <input type="text" data-validate="required" name="ip_1"> <input type="text" data-validate="required notequals=ip_1" name="ip_2"> </code></pre> </li> <li id="_validator_func_equals"> <strong>equals</strong> - value must be equal to compared input <pre><code> <input type="text" data-validate="required" name="ip_1"> <input type="text" data-validate="required equals=ip_1" name="ip_2"> </code></pre> </li> <li id="_validator_func_custom"> <strong>custom</strong> - required valid function exist name <pre><code> --- html <input type="text" data-validate="custom=myValidateFuncName"> ---- javascript function myValidateFuncName(val){ val = parseInt(val); return Metro.utils.isInt(val) && (val > 3 && val < 9); } </code></pre> </li> </ul> <h4>Combine validating functions</h4> <p> You can combine function. To use it, add function to attribute <code>data-validate</code> with <code>space</code> delimiter. </p> <pre><code> <input type="text" data-validate="required pattern=^[\w]{7,15}$"> </code></pre>  <h3 id="_validator_functions_mode">Functions mode</h3> <p class="text-small">New in 4.2.6</p> <p> By default, all validating functions work in <strong>required mode</strong> - field value cannot be empty and must have required value. You can change this behavior with special form attribute <code>data-required-mode</code>. If you set this attribute to <code>false</code>, functions will work only if field value not empty or with <code>required</code> function in the pair. </p> <div class="example"> <p class="h5 text-light">Default behavior, check value is valid email and not empty</p> <form data-role="validator" action="javascript:" class="mt-2"> <input type="text" data-validate="email"> <div class="form-actions"> <button class="button" type="submit">Submit</button> <button class="button" type="reset">Reset</button> </div> </form> <p class="h5 text-light">Required mode - false, check value is valid email when not empty</p> <form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2"> <input type="text" data-validate="email"> <div class="form-actions"> <button class="button" type="submit">Submit</button> <button class="button" type="reset">Reset</button> </div> </form> <p class="h5 text-light">Required mode - false, check value is valid email and not empty with rule required</p> <form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2"> <input type="text" data-validate="required email"> <div class="form-actions"> <button class="button" type="submit">Submit</button> <button class="button" type="reset">Reset</button> </div> </form> </div> <pre><code> <p class="h5 text-light"> Default behavior, check value is valid email and not empty </p> <form data-role="validator" action="javascript:" class="mt-2"> <input type="text" data-validate="email"> <div class="form-actions"> <button class="button" type="submit">Submit</button> <button class="button" type="reset">Reset</button> </div> </form> <p class="h5 text-light"> Required mode - false, check value is valid email when not empty </p> <form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2"> <input type="text" data-validate="email"> <div class="form-actions"> <button class="button" type="submit">Submit</button> <button class="button" type="reset">Reset</button> </div> </form> <p class="h5 text-light"> Required mode - false, check value is valid email and not empty with rule required </p> <form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2"> <input type="text" data-validate="required email"> <div class="form-actions"> <button class="button" type="submit">Submit</button> <button class="button" type="reset">Reset</button> </div> </form> </code></pre> <h3 id="_validator_events">Events</h3> <p> When Validator is works, fired any events: <code>onBeforeSubmit(form, data)</code>, <code>onError(element, value)</code>, <code>onValidate(element, value)</code>, <code>onErrorForm(form, data)</code>, <code>onValidateForm(form, data)</code>, <code>onSubmit(form, data)</code>, <code>onValidatorCreate(form)</code>. </p> <p> To use event add attribute <code>data-on-*</code> to form. </p> <div class="example"> <form data-role="validator" action="javascript:" data-on-submit="alert('Your submitted name is: ' + this['nick_name'].value)"> <div class="row mb-2"> <div class="cell-md-6"> <label>Your nickname</label> <input type="text" data-validate="minlength=3" placeholder="Enter your nickname" name="nick_name"> <span class="invalid_feedback"> Input correct name with min length 6 symbols </span> </div> </div> <button class="button primary">Submit</button> </form> </div> <pre class=""><code> <form data-role="validator" action="javascript:" data-on-submit="alert('Your submitted name is: ' + this['nick_name'].value)"> <div class="row mb-2"> <div class="cell-md-6"> <label>Your nickname</label> <input type="text" data-validate="minlength=6" name="nick_name"> <span class="invalid_feedback"> Input correct name with min length 6 symbols </span> </div> </div> <button class="button primary">Submit</button> </form> </code></pre> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data</th> <th>Context</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onError(el, val)</code></td> <td><code>data-on-error</code></td> <td><code>element</code></td> <td>Event generate if field not passed validation</td> </tr> <tr> <td><code>onValidate(el, val)</code></td> <td><code>data-on-validate</code></td> <td><code>element</code></td> <td>Event generate if field passed validation</td> </tr> <tr> <td><code>onErrorForm(log, el)</code></td> <td><code>data-on-error-form</code></td> <td><code>form</code></td> <td>Event generate if form not passed validation</td> </tr> <tr> <td><code>onValidateForm(el)</code></td> <td><code>data-on-validate-form</code></td> <td><code>form</code></td> <td>Event generate if form passed validation</td> </tr> <tr> <td><code>onBeforeSubmit(el)</code></td> <td><code>data-on-before-submit</code></td> <td><code>form</code></td> <td>If this function return false, form will not be submitted</td> </tr> <tr> <td><code>onSubmit(el)</code></td> <td><code>data-on-submit</code></td> <td><code>form</code></td> <td>Event generate when form is submitted</td> </tr> </tbody> </table> <h3 id="_validator_submit">Submit form</h3> <p> The following conditions must be met to send the form: </p> <ol class="decimal"> <li>The all the validations must be passed</li> <li>If an <code>onBeforeSubmit</code> event is defined, it must return true</li> </ol> <h3 id="_validator_error_handling">Error handling</h3> <p> If not passed all validations, a form will not be submitted. You can handling the validation errors with validator events: <code>onError</code> and <code>onErrorForm</code>. </p> <h4 id="_validator_error_handling_onError">onError</h4> <p> Event <code>onError</code> generated for each inputs when input not passed validation. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <form data-role="validator" action="javascript:" data-on-error="$('#handling-errors-onError').append(this.name + ': ' + this.value + '<br/>')"> <div class="form-group"> <label>Input name (<small>required</small>)</label> <input type="text" data-validate="required" name="nickname"> </div> <div class="form-group"> <label>Input age (<small>required number</small>)</label> <input type="text" data-validate="required number" name="age"> </div> <div class="form-group"> <label>Input pin (<small>required digits length=4</small>)</label> <input type="text" data-validate="required digits length=4" name="pin"> </div> <div class="form-group"> <label>Input password (<small>required</small>)</label> <input type="password" data-validate="required" name="pass1"> </div> <div class="form-group"> <label>Input password again (<small>required compare=pass1</small>)</label> <input type="password" data-validate="required compare=pass1" name="pass1_1"> <span class="invalid_feedback"> Pass1 and Pass2 must be equal. </span> </div> <br /> <button class="button success">Submit</button> </form> </div> <div class="cell-md-6"> <button class="button" onclick="$('#handling-errors-onError').html('')">Clear log</button> <div id="handling-errors-onError"></div> </div> </div> </div> <pre><code class="html"> <div class="row"> <div class="cell-md-6"> <form data-role="validator" action="javascript:" data-on-error="$('#handling-errors-onError').append(this.name + ': ' + this.value + '<br/>')"> <div class="form-group"> <label>Input name (<small>required</small>)</label> <input type="text" data-validate="required" name="nickname"> </div> <div class="form-group"> <label>Input age (<small>required number</small>)</label> <input type="text" data-validate="required number" name="age"> </div> <div class="form-group"> <label>Input pin (<small>required digits length=4</small>)</label> <input type="text" data-validate="required digits length=4" name="pin"> </div> <div class="form-group"> <label>Input password (<small>required</small>)</label> <input type="password" data-validate="required" name="pass1"> </div> <div class="form-group"> <label>Input password again (<small>required compare=pass1</small>)</label> <input type="password" data-validate="required compare=pass1" name="pass1_1"> <span class="invalid_feedback"> Pass1 and Pass2 must be equal. </span> </div> <br /> <button class="button success">Submit</button> </form> </div> <div class="cell-md-6"> <button class="button" onclick="$('#handling-errors-onError').html('')">Clear log</button> <div id="handling-errors-onError"></div> </div> </div> </code></pre> <h4 id="_validator_error_handling_onErrorForm">onErrorForm</h4> <p> Event <code>onErrorForm</code> generated for form when input not passed validation. Argument for this event is object: <code>{input: el, name = '...', value: ..., funcs: [...], errors: [...]}</code>. </p> <ul class="unstyled-list mt-2"> <li><strong>input</strong> - html input element</li> <li><strong>name</strong> - input name</li> <li><strong>value</strong> - input value</li> <li><strong>funcs</strong> - input validation functions as array</li> <li><strong>errors</strong> - not passed validation functions as array</li> </ul> <div class="example"> <div class="row"> <div class="cell-md-6"> <form data-role="validator" action="javascript:" data-on-error-form=" var log = arguments[0]; var res = $('#handling-errors-onErrorForm'); res.html(''); $.each(log, function(){ res.append(this.name + ': ' + this.errors.join(',') + '<br/>') }) "> <div class="form-group"> <label>Input name (<small>required</small>)</label> <input type="text" data-validate="required" name="nickname"> </div> <div class="form-group"> <label>Input age (<small>required number</small>)</label> <input type="text" data-validate="required number" name="age"> </div> <div class="form-group"> <label>Input pin (<small>required digits length=4</small>)</label> <input type="text" data-validate="required digits length=4" name="pin"> </div> <div class="form-group"> <label>Input password (<small>required</small>)</label> <input type="password" data-validate="required" name="pass1"> </div> <div class="form-group"> <label>Input password again (<small>required compare=pass1</small>)</label> <input type="password" data-validate="required compare=pass1" name="pass1_1"> <span class="invalid_feedback"> Pass1 and Pass2 must be equal. </span> </div> <br /> <button class="button success">Submit</button> </form> </div> <div class="cell-md-6"> <div id="handling-errors-onErrorForm"></div> </div> </div> </div> <pre><code class="html"> <div class="row"> <div class="cell-md-6"> <form data-role="validator" action="javascript:"