Validin tries to take the headache out of form validation by making things simple and keeping your markup clean. Dependencies: Just jQuery.
First, link to jQuery and validin in your HTML:
<!-- validin styles: -->
<link rel="Stylesheet" href="validin.css" type="text/css" />
<!-- jQuery: -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- validin scripts: -->
<script src="validin.js"></script>
Then activate it on your forms:
// You can enable validin on all forms in your page:
$(window).validin();
// Or just a specific form:
$('.form1').validin();
Lastly, add 'validate' attributes to all of the input fields that need validation:
<input validate="number">
Try testing valid and invalid values in each of the forms to see how validin reacts to user input. Note: Forms will be valid even with empty inputs if the field isn't set to 'required'.
Below are a number of javascript functions to give you more control over how your forms are validated and operate.
Similar to jQuery's val() function, it will return the value of an input, but also returns true/false for checkboxes and the correct value whichever radio button is selected in a set.
vnGetValue($input)
or, with jQuery:
$input.getValue()
$input* | (jQuery object) jQuery object for the desired input field |
Attach an error message to an input field and disable form without using a validation test. This is useful for instances where a value is programmatically controlled or needs to be validated elsewhere (e.g. server-side).
Note: more than one error can be attached to an input via the addError() function, but only one will be shown at a time.
Note: the field will show and error and the form disabled until the error is removed.
vnAddError($input, error_id, error_message)
or, with jQuery:
$input.addError(error_id, error_message)
$input* | (jQuery object) jQuery object for the desired input field |
error_id* | (string) Unique identifier for error to be selectable by removeError() (may only be letters, numbers, hyphens, and underscores) |
error_message* | (string) error message to be displayed on input |
Remove an error from an element that was created via addError()
Note: the field may still show errors if other validations are unsatisfied
vnRemoveError($input, error_id)
or, with jQuery:
$input.removeError(error_id)
$input* | (jQuery object) jQuery object for the desired input field |
error_id* | (string) Unique identifier for error created previously by addError() |
Returns whether or not a valid is valid. If invalid, it will also display an error message and disable the form
vnValidateInput($input, run_immediately)
or, with jQuery:
$input.validateInput(run_immediately)
$input* | (jQuery object) jQuery object for the desired input field |
run_immediately | (boolean) Whether or not to check if input is valid immediately, rather than wait for the default delay |
Returns whether or not (true/false) the given form has any errors
vnIsFormValid($form)
or, with jQuery:
$input.isFormValid()
$form* | (jQuery object) jQuery object for the desired form field |
Attach an message to an input element. This will not create an error or disable the form.
Note: Message will be cleared the next time the validation is checked on the element
vnAttachMessage($input, message)
or, with jQuery:
$input.attachMessage(message)
$input* | (jQuery object) jQuery object for the desired input field |
message* | (string) error message to be displayed on input |
Validin comes pretty much perfect right out of the box, but there are some ways to customize it's behavior. You can add options to the validin() function like so:
options = {
feedback_delay: 1000,
invalid_input_class: "bad_input"
};
$(window).validin(options);
Here are the available settings and their defaults:
feedback_delay: 700, // Number of ms after input before testing validity
invalid_input_class: "invalid", // Class name added to invalid inputs
error_message_class: "validation_error", // Class name added to forms with validation errors
form_error_message: "Please fix any errors in the form", // The message that appears at the bottom of a form if there are any errors present
required_fields_initial_error_message: "Please fill in all required fields", // Initial message showing why form is disabled if there are required fields but no errors
required_field_error_message: "This field is required", // Message shown next to required fields that are not filled in AFTER field has lost focus
custom_tests: [] // Array of custom validation tests (see below)
There are a bunch of validation tests already built into validin, but you can make your own with the 'tests' option. Custom validation tests follow this syntax:
'validation_name': {
'regex': [RegEx], // Regular expression to test if input is valid
'error_message': [string] // The message shown if field is invalid
}
For example, you might put this in your validin options to test an input field for two-letter values, such as you'd find in US state abbreviations:
custom_tests: {
'state_abbreviation': {
'regex': /[A-Z]{2}/,
'error_message': "States are abbreviated with two capital letters"
}
}