Form validation for JavaScript and jQuery

SimpleV is a simple form validation component written in JavaScript, using only jQuery core functionalities. Some of the features are:

can validate inputs, textareas, checkboxes, radios and selects
is easy-to-use thanks to inline data-attributes
automatically attaches to form elements
does not require you to add CSS or images
does not require additional JavaScript libraries other than jQuery 1.4+
is browser backwards compatible down to Internet Explorer 8

// Documentation

// Include

You can place the SimpleV script include basically wherever you want, just make sure that jQuery is loaded before. jQuery is required and must be at least version 1.4 to work with SimpleV. Remember to pick jQuery 1.x if you need support for Internet Explorer ≤ 8, otherwise pick 2.x or 3.x.

<html>
    <head>

        ...

        <script src="jquery.js"></script>

    </head>
    <body>

        ...

        <script src="jquery.simplev.js"></script>

    </body>
</html>
<html>
    <head>

        ...

        <script src="jquery.js"></script>
        <script src="jquery.simplev.js"></script>

    </head>
    <body>

        ...

    </body>
</html>

// Initialization

1. Add the attribute data-v to the forms you want to validate.
2. Add the attribute data-v to all input elements you want to validate and specify the expected input (see Validation section).
3. Call SimpleV.init() once.

<form method="post" data-v>

    <input data-v="required, min 10, max 100" />
    ...

</form>

<script>
    SimpleV.init();
</script>

4. You can access an array of the initialized forms anytime using: SimpleV.forms
or SimpleV.form for the first form (functionally equal to SimpleV.forms[0]).

// Validation

You can specify the following options in any order. Separate multiple options using commas.

option	description	usage example
required	Expecting to see at least one character/selection. Whitespaces are trimmed by default and do not count.	data-v="required"
min n	Expecting to see a minimum of `n` characters/selections. Whitespaces are trimmed by default and do not count.	data-v="min 10"
max n	Expecting to see a maximum of `n` characters/selections. Whitespaces are trimmed by default and do not count.	data-v="max 100"
/regexp/	Expecting the input to match the specified regular expression pattern.	data-v="/^[0-9]+$/"
email	Expecting an e-mail address. Naïve pattern check: `x@y.z`	data-v="email"
notrim	Allow whitespaces to count towards the input, i.e. do not trim the input.	data-v="notrim"

You may customize invalid feedback messages using the attribute: data-v-msg

<input name="username" data-v="required, email" data-v-msg="Please enter your username to continue." />

To localize the default feedback messages, overwrite the values in: SimpleV.l10n

<script src="jquery.simplev.js"></script>
<script>
    SimpleV.l10n = {
        INPUT_REQUIRED:     'This field is required.',
        INPUT_MIN:          'This field must contain at least {min} characters.',
        INPUT_MAX:          'This field must not exceed a total number of {max} characters.',
        INPUT_PATTERN:      'This field does not match the expected pattern.',
        INPUT_EMAIL:        'This field is not a valid e-mail address.',
        SELECTION_REQUIRED: 'Selection is required.',
        SELECTION_MIN:      'Select at least {min} options.',
        SELECTION_MAX:      'Select no more than {max} options.'
    };
</script>

// Constructor

SimpleV.init ( container, options )
- fetches all form elements with attribute data-v
- if you do not specify container, the whole body is looked at
- you may specify data-v="false" to skip individual forms

// Methods

SimpleV.isValid ( form ) : boolean
validates the specified form and returns if the form passed the validation

// Callbacks

SimpleV.onValid ( )
- callback invoked after the validation passed
- return false to interrupt the submit event
SimpleV.onInvalid ( )
- callback invoked after the validation did not pass

// Options

− options
delayValidation	true	true: start validation after the input was left for the first time false: start validation immediately
scrollIntoView	true	automatically scroll into view of the first element that did not pass validation
scrollIntoViewDuration	600	duration of the scroll into view animation in milliseconds
scrollIntoViewOffset	-32	offset added to the position of the first element, which receives the scroll into view
position	'append'	'append': insert the message element after the input element 'prepend': insert the message element before the input element function(inputElement, messageElement): callback function to manually add the message element to the DOM
className	'simplev-message'	class of the message element dynamically added on validation
validClass	'simplev-valid'	class to set on the input element in case the validation passed
invalidClass	'simplev-invalid'	class to set on the input element in case the validation failed
log	false	log SimpleV related warnings and infos in the console

// Examples

multi checkboxes

To make min and/or max work, all <input type="checkbox"> need to be grouped by their "name" attribute:

<input type="checkbox" name="traits" value="attractive" data-v="min 1, max 2" />
<input type="checkbox" name="traits" value="rich" />
<input type="checkbox" name="traits" value="smart" />

select's default selection

To make required work, the "nothing selected" <option> needs to be an empty value:

<select data-v="required">
    <option value="">I like...</option>
    <option value="dogs">dogs</option>
    <option value="cats">cats</option>
    <option value="both">both</option>
</select>

// License

// Download

SimpleV 0.2.1 10 KB