Validation
Apply validation to a form with built in rules and styles.
info This component requires the inclusion of the jQuery Validation plugin before the component script.
<script src="//cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
Usage
For simple validation give your required inputs an attribute required
and add the data-f-validate
attribute to your form tag.
Example
Markup
<form class="f-form" data-f-validate>
<p class="f-form-controls">
<input type="text" name="fullname" class="f-width-1-1" placeholder="Your Name" required>
</p>
<p class="f-form-controls">
<input type="email" name="email" class="f-width-1-1" placeholder="Your Email" required>
</p>
<p>
<input type="submit" class="f-btn f-btn-large f-btn-primary" name="form-submit" value="Submit">
</p>
</form>
Options
The validation component extends the jQuery validate plugin so all options available to that will work here. It's recommended that you don't overwrite the options for errorClass
, errorElement
and validClass
as these will affect the style of the display of messages.
There are also default invalidHandler
, onkeyup
, onkeyup
, onfocusout
, onclick
handlers to handle the message display. If you overwrite them there may be unforeseen issues with the display of errors in your form.
jQuery validation options. In order to add callbacks to the form or change functions you will need to manually call validation on your form. See below.
Init element manually
let objForm = FatKit.validate(element, { /* options */ });
Example
let objForm = FatKit.validate(FatKit.$("#testform"), {
debug: true,
highlight: function(element, errorClass)
{
FatKit.$(element).removeClass("f-form-success").fadeOut(function()
{
FatKit.$(element).fadeIn().addClass("f-form-danger");
});
},
submitHandler : function()
{
alert("Submitted");
}
});