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");

	}
});