drroach / formvalidation

Simplest JavaScript form validation

FormValidation

This project has moved

This project has moved to Gitlab.

Simple to implement jQuery form validation plugin. Add validation to your input fields simply be adding HTML fields to them. An example may look like this:

<input type="text" fv-email="This must be a valid email." name="email" placeholder="Email">

Validation Features

fv-not-empty

Make sure that a input field isn't empty

Example:

fv-not-empty="This field can't be empty"

fv-email

Make sure that a input field has a valid email address

Example:

fv-email="This field must be a valid email address"

fv-simple-email

Much simpler email check that only looks for @ in input. This may be a better choice for large-scale production use where the 0.1% of emails that may fail the fv-email check will not fail.

Example:

fv-simple-email="This field must be a valid email address"

fv-number

Make sure that a input field has a valid number

Example:

fv-number="This field must be a number"

fv-alphanum

Make sure that a input field has a alpha-numeric value

Example:

fv-alphanum="This field must be a alpha-numeric value"

fv-func

Add some JavaScript code to be ran to which will either return true or an error message. This is useful when you want to make sure a variable has a certain value for example. You can also use "this" in a fv-func call to reference the current inputs' value

Example:

fv-func="this == 'I\'m Human!' ? true : 'It looks like you\'re not human'"

You can also use JavaScript variables in here

Example:

fv-func="loading == false ? true : 'The page is loading'"

fv-advanced

You can pass a JSON object to this validation method to perform more advanced validation

min

The minimum number of characters that this input field has to have

max

The maximum number of characters that this input field can have

regex

Write a regular expression to match against the field input

regex_reverse

Boolean that can tell our checks to fail on the inverse of our regular expression. For example, say you don't want any whitespace in your input. Setting this value to true will throw your error if it finds any whitespace. Rather than trying to force whitespace only.

message

The error message that is displayed when a condition isn't met

Example:

fv-advanced='{"min": "6", "max": "10", "regex": "\\w+", "message": "This value must be at least 6 characters long."}'

Running custom methods

There are times when you may want to run some JS after a field has been validated or invalidated. To do this you can add the fv-valid-func or fv-invalid-func data values. These allow you to run a function to add/remove a class on validation and invalidation. These two data types do not currently support the use of $(this) so if you wish to target a specific input it will need a unique selector. As of yet this cannot call an already existing JS method although this may be made available in the future

Example:

<input type="text" id="targetedInput" fv-email="Please supply a valid email." fv-valid-func="$('#targetedInput').addClass('custom-valid')" fv-invalid-func="$('#targetedInput').removeClass('custom-valid')">

Setup

You can pass some extra setup data such as custom classes so the whole plugin is easier to work with. You can do this by calling formValidator.setup() or FV.setup() in your code.

Example:

FV.setup({
    errorMessageClasses: "col-xs-12 col-sm-8 col-md-4"
});

errorMessageClasses

Pass in a string of classes to be added to error messages

Example:

errorMessageClasses: "col-xs-12 col-sm-8 col-md-4"

formvalidation's Issues

Stringing validation checks

Having more than one validation check on an input will only run the first validation check.

REGEX: Email

There's a lengthy and read-worthy discussion about REGEX Mail patterns here.

Basically,

if(val.match(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i) != null) {
     addSuccess(this);
}

marks for example blocks custom endings beyond 4 characters as invalid.

Some even go as far and only check for an @ sign existing in the string

Eval effect on code optimization

The fv-func() method makes use of eval() in order to run the user desired method to validate an input field. The use of this means that the JavaScript engine will have no knowledge of what is about to be ran and as a result is poorly optimized.

The fix for this will be based around replacing the eval() call with some sort of parser?

Possible to run function if valid?

hey buddy - question.

Would it be possible to run a function or simply apply a JS variable if the input field is validated?

For example, if the field was valid to "addClass" or something similar?

In this case the sumbit button would be hidden if not validated, or vice versa:

$('#datadirbtn').addClass("btn-hidden");

thx!

REGEX: no whitespaces

hey man, good job on this.

Question:

Trying to produce an error if the input contains white spaces ... using this:

fv-advanced='{"regex": "/^\s$/;", "message": "This field cannot contain spaces."}' 
``

But I'm getting the following error:

VM389:1 Uncaught SyntaxError: Unexpected token s in JSON at position 15
at JSON.parse ()
at HTMLInputElement. (VM375 formValidation.js:33)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.y.handle (jquery.min.js:2)

Any tips?

thanks,