The jQuery.forms library has been written to simply:
- Frontend validation and styling of forms.
- Validation types using regex and validation function set.
- Dynamically populating multiteir object data into forms.
- Calls that check to ensure the data is valid before proceeding
jQuery Forms and Frontend Validation. Validation any form element by adding a data-required attribue and a validation function to the validation class in jquery.forms.js
Adding a data-required attribue and a validation function will set that fields in the form have valid data. On a form check if there is an error an ".error" class will be added to the input/textarea/select tag.
<form id="form-id-name" method="POST">
<input type="text" name="name" value="" data-required="valid_notnull" />
<input type="text" name="email" value="" data-required="valid_email" />
<input type="text" name="phone[mobile]" value="" data-required="valid_phone" />
<button type="submit">Submit</button>
</form>
$(document).ready(function() {
var form = $("#form-id-name");
$("button[type=submit]", form[0]).on("click", function(event) {
// The "Form.validates(form)" function calls the validation check
if (Form.validates(form)) {
// On a sucessfull validation call
return true;
} else {
// On failed validation call
event.preventDefault();
return false;
}
});
});
Errors are automatically pushed to
<div class="errors"></div>
var form = $("#form-id-name");
var variables = {
"name": "Test User Name",
"email": "Test@User.Email",
"phone": {
"mobile": "123-123-1234"
}
}
$(document).ready(function() {
form.values(variables)
})
There are already basic validation functions in the validation library.
valid:
valid_notnull:
valid_isnotnull:
valid_email:
valid_phone:
valid_username:
valid_password:
valid_password_confirm:
valid_new_password_confirm:
valid_postal_code:
valid_captcha: (ReCaptcha)
valid_terms_of_service:
Custom validation functions can also be created in other assets/pages that are specific to that asset or page.
Forms.add_validation(name, function(input) {
// Add your check on the input and return true/false
// depending on the result of the validation
});