validate5

Form validations made easy.

:cloud: Installation

Check out the dist directory to download the needed files and include them on your page.

If you're using this module in a CommonJS environment, you can install it using npm or yarn and require it:

# Using npm
npm install --save validate5

# Using yarn
yarn add validate5

:clipboard: Example

/**
 * Having the following HTML markup
 *
 * <form action="#" method="get" accept-charset="UTF-8" style="margin-left:6px;">
 *     <div class="container">
 *         <input type="text" name="name" placeholder="Your Name" autofocus required/><br/>
 *     </div>
 *     <div class="container">
 *         <input type="email" name="email" placeholder="Your Email" required/><br/>
 *     </div>
 *     <div class="container">
 *         <input type="text" name="text" title="Invalid ZIP code." pattern="\d{5}-?(\d{4})?" placeholder="ZIP (5 numbers)" required/><br/>
 *     </div>
 *     <div class="container">
 *         <input type="submit" value="Submit" />
 *     </div>
 * </form>
 **/

// To validate the forms on submit, use:
validate5("form");

:question: Get Help

There are few ways to get help:

1. Please post questions on Stack Overflow. You can open issues with questions, as long you add a link to your Stack Overflow question.
2. For bug reports and feature requests, open issues. :bug:
3. For direct and quick help, you can use Codementor. :rocket:

:memo: Documentation

validate5(forms)

Handles the submit event on the selected forms.

You may want to extend the validate5.patterns object with custom types. By default it has validation for:

• email: [emailRegex, "Invalid email address"]

e.g. validate5.patterns.myCustomType = [/^[0-9]+$/g, "Not a number."]

Use the validate5.skips array to handle elements that should be skipped when validating. By default it skips the type=submit inputs.

e.g.

validate5.skips.push(function (c) {
  if (c.getattribute("data-ignore-validation")) { return true; }
});

Params

• String forms: The form(s) selector you want to automagically validate on submit.

validateInput(input)

Validates an input element.

Params

• HTMLElement input: The input to validate.

Return

• Validify The validify result.

inputs(formElm, cb)

Iterate the inputs in the provided form.

Params

• HTMLElement formElm: The form element.
• Function cb: The callback function.

Return

• Array The array of inputs.

validateForm(formElm)

Validates the form element.

Params

• HTMLElement formElm: The form element.

Return

• Array An array of errors.

showErrors(formElm)

Validates the form and displays the errors.

Params

• HTMLElement formElm: The <form> element to validate.

Return

• Array|Boolean An array of errors or false if all the fields are valid.

:yum: How to contribute

Have an idea? Found a bug? See how to contribute.

:sparkling_heart: Support my projects

I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:

• Starring and sharing the projects you like :rocket:

• —I love books! I will remember you after years if you buy me one. :grin: :book:

• —You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea:

• —Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).

• Bitcoin—You can send me bitcoins at this address (or scanning the code below): 1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6

  

Thanks! :heart:

:scroll: License

MIT © Ionică Bizău