JS Form Validation Library: Validate form inputs of many types

Recommend this page to a friend!
  Info   View files View files (19)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 87 All time: 440 This week: 4Up
Version License JavaScript version Categories
form-validation 1.0GNU General Publi...5Validation, Forms
Description Author

This object can validate form inputs of many types.

It can take the identifier of a form element and validate the form inputs when the submit button is clicked.

The object validates each input according to its type. Currently it supports input of types: email, number, date, url, password and text.

The validation messages can be customized.

Picture of Dave Norminton
  Performance   Level  
Name: Dave Norminton <contact>
Classes: 3 packages by
Country: United Kingdom
Age: ???
All time rank: 1236 in United Kingdom
Week rank: 6 Up1 in United Kingdom Up
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Details

<h1>form-valid.js</h1>

<p> Form-valid.js is a javascript program which adds event listeners to all inputs within an 'id' specified form. Form-valid.js also has a range of methods to display error / success messages which are easy to change and customise. </p>

<h2>Quick Start</h2>

<p> Before we start a few must haves ...<br />

1) All inputs which need validating require an id which is used by the script to handle the messages.<br />

2) If you want to have a message box with appears around the input this should be placed in the html above the input with a standard class for the error / success messages.<br /> 3) Ensure the id of the submit input is not 'submit' as this will allow the form to submit the data without validation ! </p> <h2>The code</h2> <p> To run the script over your form simply place the line <code>ValidateForm.init('myform')</code> within script tags below where form-valid.js is included.... </p> <code> <script src="form-valid.js"></script> <script> ValidateForm.init('myform') </script> </code> <br /> <p> Please note the argument to ValidateForm.init should be the 'id' used by the form! <br /> And that's it, form-valid will now be validating your form and sending default messages. </p> <h3>Input that confirms anothers input</h3> <p> To add a confirm type input such as for passords or email addresses use the custom data attribute 'data-vf' with a value of 'confirm'. This tells the script that this is a confirm type input field, and it will use that information to find an input with the same type and ensure that the values of the two match.<br /> Your inputs would look something lke below.. </p> <code> &lt;input type="password" id="password" /&gt; &lt;input type="password" id="confirm-password" data-vf="confirm" /&gt; </code> <h3>Ignore an input for validation</h3> <p> If you have an input which you don't want to be checked then we again use the data attribute 'data-vf' but this time with a value of 'ignore' which tells the program to just ignore what happens with this input field.

</p> <h2>Options : </h2> <h3>Custom error / success messages</h3> <p> Form-valid.js has a range of default messages wich supply feedback to the user, all of these can be altered to messages of your choice via the addittion of a little extra code <code>ValidateForm.setMsg( 'emailsMatch' , 'Good Match');</code><br /> The format for this is ValidateForm.setMsg('OUTPUT_IDENTIFIER', 'YOUR_MESSAGE')<br /> <b>The following are all the available identifiers you can use</b><br /> <table>

<tr>
    <td><b>IDENTIFIER</b></td>
    <td><b>USAGE</b></td>
</tr>
<tr>
    <td>emailsMatch</td>
    <td>Success - emails are a match</td>
</tr>
<tr>
    <td>emailsNoMatch</td>
    <td>Error - emails don't match</td>
</tr>
<tr>
    <td>inValidEmail</td>
    <td>Error - email is not valid</td>
</tr>
<tr>
    <td>validEmail</td>
    <td>Success - email is valid</td>
</tr>
<tr>
    <td>isNumber</td>
    <td>Success - the number is good</td>
</tr>
<tr>
    <td>isNotNumber</td>
    <td>Error - not a real number</td>
</tr>
<tr>
    <td>isNotDate</td>
    <td>Error - not a valid date</td>
</tr>
<tr>
    <td>isDate</td>
    <td>Success - date is valid</td>
</tr>
<tr>
    <td>isUrl</td>
    <td>Success - valid url</td>
</tr>
<tr>
    <td>isNotUrl</td>
    <td>Error - not a valid url</td>
</tr>
<tr>
    <td>validPassword</td>
    <td>Success - password is valid</td>
</tr>
<tr>
    <td>inValidPassword</td>
    <td>Error - not a valid password</td>
</tr>
<tr>
    <td>passwordsMatch</td>
    <td>Success - Passwords match</td>
</tr>
<tr>
    <td>passwordsNoMatch</td>
    <td>Error - Passwords don't match</td>
</tr>    
<tr>
    <td>textOk</td>
    <td>Success - provided text in input</td>
</tr>    
<tr>
    <td>textNoOk</td>
    <td>Error - no text in input</td>
</tr>                                                                

</table> </p> <h3>How to display messages</h3> <p> The error / success messages can be supplied in a variety of ways, firstly by a simple change in color of the input borders; green meaning success, and red for error.<br /> The second is via a message with appears above the input and displays either the default messages or your own custom messaegs. This box can also be configured to either show a success 'tick' or an error 'cross'.<br /> The final way is to have the output displayed in a single box anywhere you decide on the page, the position would be made via css, as with all styles made on the output box's. </p> <h4>Above input messages</h4> <p> The default of the script is to show the error messages above the input so only the css would need to be supplied to these message box's.<br /> The default class for the feedback box is 'error' this can be changed : </p> <code> ValidateForm.changeErrorClass('YOUR_CUSTOM_FEEDBACK_BOX_CLASS'); </code> <h4>Simply highlight inputs</h4> <p> By default the input fields are highlighted to show error/ success, but this can be turned off ... </p> <code> ValidateForm.highlightOff(); </code> <p> If you oly want ot highlight the input fields and display no messages then use .. </p> <code> ValidateForm.msgOff(); </code> <h4>Single message box</h4> <p> To display a single message which is customised by css and displayed where you like.. </p> <code> ValidateForm.globalMsg('alert'); </code> <p> Here 'alert' is the id of the element with which the feedback will be displayed in. </p> <h4>Tick and cross feedback</h4> <p> To display your feedback as a simple tick for success and a cross for error, simply add the line below. </p> <code> ValidateForm.tickCross('message'); </code> <h3>How the input is validated</h3> <p> A quick note on what the form validator deems to be valid input.<br /> Emails are of any type of valid format email, numbers are any number ie not a-z or symbol, the url begins with either http or https, and the password must be at least eight characters long, one letter must be uppercase and one lowercase and must constain at least one number ie Password1. </p> <h3>Debugging</h3> <p> Form-valid.js has a simple debugging tool to help the developer incorporate form-valid.js into their code. </p> <code> ValidateForm.debug(); ValidateForm.debug('settings'); </code> <p> Debug on it's own will supply error messages which can help in finding out why your code isn't working, and the handy 'settings' argument will return a JSON object of all the settings in the script and their values. Note these are run singular so either use "ValidateForm.debug();" or "ValidateForm.debug('settings');"; </p> <h3>Style feedback</h3> <p> When the input is valid or not a class is added to the 'feedback' box with either a class of error or one which is defined by you by using the line <code>ValidateForm.changeErrorClass('YOUR_CLASS');</code>. To style a valid message box use the class name of 'success' and for an error message use 'error'. </p>

  Files folder image Files  
File Role Description
Files folder imageapp (1 file, 3 directories)
Files folder imagedist (5 files)
Accessible without login Plain text file document.txt Doc. Documentation
Accessible without login Plain text file gulpfile.js Aux. Auxiliary script
Accessible without login Plain text file package-lock.json Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  app  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (1 file)
Files folder imageviews (6 files)
  Accessible without login HTML file index.html Doc. Documentation

  Files folder image Files  /  app  /  css  
File Role Description
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  app  /  js  
File Role Description
  Plain text file form-valid.js Class Class source

  Files folder image Files  /  app  /  views  
File Role Description
  Accessible without login Plain text file example-custom-messages.pug Data Auxiliary data
  Accessible without login Plain text file example-highlight-only.pug Data Auxiliary data
  Accessible without login Plain text file example-top-message-box.pug Data Auxiliary data
  Accessible without login Plain text file index.pug Data Auxiliary data
  Accessible without login HTML file password-example.html Doc. Documentation
  Accessible without login Plain text file password-example.pug Data Auxiliary data

  Files folder image Files  /  dist  
File Role Description
  Accessible without login HTML file example-custom-messages.html Doc. Documentation
  Accessible without login HTML file example-highlight-only.html Doc. Documentation
  Accessible without login HTML file example-top-message-box.html Doc. Documentation
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login HTML file password-example.html Doc. Documentation

 Version Control Unique User Downloads Download Rankings  
 100%
Total:87
This week:0
All time:440
This week:4Up