jquery ketchup-plugin for Client-side form-validation:

jquery ketchup-plugin for Client-side form-validation:

There are many jquery plugins available for client-side form validation (to validate form before actually submitting it). jquery ketchup-plugin is one of them.

Github: https://github.com/mustardamus/ketchup-plugin

Demo: http://demos.usejquery.com/ketchup-plugin/

Validations provided by plugin:
https://github.com/mustardamus/ketchup-plugin/blob/master/jquery.ketchup.validations.js

Steps:

1. include css file in your application.css file
*= require jquery.ketchup

2. include js file in your application.js file
//= require jquery.ketchup.all.min

3. Form:
= simple_form_for(@user, :html => {:class => ‘ket-validation’}) do |f|_
= f.input :first_name, input_html: { class: “required_field “}_
= f.input :email, input_html: { class: “validate_email” }_

4. initialization on js file: use the class of form and input fields as follows

$(“.ket-validation”).ketchup({},{ ‘.required_field’ : ‘required’, ‘.validate_email’ : ‘email’ });

Additional Info:

– To hide all errors

$(“.ketchup-error”).hide();

– To explicitly call validations on any form on any event

$(“#form_id”).ketchup();

Add your own custom-validation:

You can add your own custom validation for any input field:
Following is example of US zip-code validation:

function isValidZip(zip) {
var pattern = new RegExp(/^\d{5}(-\d{4})?$/);
return pattern.test(zip);
}

$.ketchup.validation(‘zip_code’, ‘Must be a valid Zip Code!’, function(form, el, value) {
return (($.trim(value).length > 0) && !isValidZip(value)) ? false : true
});

$(“.ket-validation”).ketchup({},{
‘#zip_code’ : ‘zip_code’
});

Issue:

1. The validation of required-field fails if only spaces are given as input. This can be solved by overriding it as follows:

$.ketchup.validation(‘required’, ‘This field is required.’, function(form, el, value) {
var type = el.attr(‘type’).toLowerCase();
if(type == ‘checkbox’ || type == ‘radio’) {
return (el.attr(‘checked’) == true);
} else {
return ($.trim(value).length != 0);
}
})

2. It works properly for text and textarea inputs. To apply validation on select, use id of select input

#select input
= f.input :type, :prompt => “Select type”, :collection => (some_collection), input_html: { id: “list_select” }

#js code
$.ketchup.validation(‘lselect’, ‘You have not selected type!’, function(form, el, value) {
return value.length == 0 ? false : true
});

$(“.ket-validation”).ketchup({},{
‘#list_select’ : ‘lselect’
});

So overall jquery-ketchup plugin is easy to use and customize. Its a good start for beginners to learn.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s