How to use our JS components with jquery validate plugin?

5 mins read

How to validate EJ form controls using JQuery validate plugin

JQuery validate plugin is used to validate form controls. We can use this plugin to validate EJ Form controls also. The EJ form controls are listed below.

Numeric Textbox
Currency Textbox
Percentage Textbox
MaskEdit Textbox
Autocomplete
DropDownList
DatePicker
DateTimePicker
TimePicker

The validation procedure to validate the EJ form controls is same like validating any other HTML elements using JQuery validate plugin. Only thing we additionally need to do is empty the “ignore” property in the “validate” handler.

From the following steps you can learn how to achieve validation in EJ form controls using JQuery validate plugin.

Step 1: Include the JQuery Library and JQuery validation plugin

To use JQuery validation, we need to refer the script file ‘jquery.validate’ in our page. Along with these script file, include the Scripts and CSS files needed to render our EJ components as shown below.

HTML

<head>
    <!--Contains the neccessary theme for our componets-->
    <link href="themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
    <!--dependency script files-->
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/jquery.easing.1.3.js"></script>
    <script src="scripts/jquery.globalize.js"></script>
<!—for JQuery validation-->
    <script src="scripts/jquery.validate.min.js"></script>
    <!--contains the necessary scripts to render all the web components-->
    <script src="scripts/ej.web.all.min.js"></script>
</head>

Step 2: Create your Form by adding HTML

Add the necessary elements needed for your Form. We will convert it to EJ components in the later steps.

For JQuery Validate plugin to work we need to specify the ‘name’ attribute in the elements. In EJ Form components, if we didn’t specify the ‘name’ attribute means, the ‘name’ attribute will be set to the element automatically. The ‘id’ specified for the element will be taken as value for the ‘name’ attribute. The following code snippet showcases the initialization of the element within the <form> tag.

<body>

<h1>Register here</h1>

<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br /><br />

<div class="label">Email</div><input type="text" id="email" name="email" /><br /><br />

<div class="label">Password</div><input type="password" id="password" name="password" /><br /><br />

<div class="label">EJ Autocomplete</div><input type="text" id="autocomplete" name="autocomplete" /><br />

<div class="label">EJ Dropdown</div><input type="text" id="dropdown" name="dropdown" /><br />

<div class="label">EJ DatePicker</div><input type="text" id="datepicker" name="datepicker" /><br />

<div class="label">EJ DateTimePicker</div><input type="text" id="datetimepicker" name="datetimepicker" /><br />

<div class="label">EJ numeric</div><input type="text" id="numeric" name="numeric" /><br />

</form>

</body>

In the <script> section declare the EJ components as shown below.

$(function () {

// Specify data source for Autocomplete component

var carList = [

"Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",

"BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",

"Chevrolet Camaro", "Cadillac ",

"Duesenberg J ", "Dodge Sprinter",

"Elantra", "Excavator",

"Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",

"GAZ Siber",

"Honda S2000", "Hyundai Santro",

"Isuzu Swift", "Infiniti Skyline",

"Jaguar XJS",

"Kia Sedona EX", "Koenigsegg Agera",

"Lotus Esprit", "Lamborghini Diablo ",

"Mercedes-Benz ", "Mercury Coupe", "Maruti Alto 800",

"Nissan Qashqai",

"Oldsmobile S98", "Opel Superboss",

"Porsche 356 ", "Pontiac Sunbird",

"Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",

"Triumph Spitfire ", "Toyota 2000GT",

"Volvo P1800", "Volkswagen Shirako"

];

// Declare the Autocomplete component

$('#autocomplete').ejAutocomplete({

width: 205,

dataSource: carList,

enabled: true

});

BikeList = [

{ empid: "bk1", text: "Apache RTR" }, { empid: "bk2", text: "CBR 150-R" }, { empid: "bk3", text: "CBZ Xtreme" },

{ empid: "bk4", text: "Discover" }, { empid: "bk5", text: "Dazzler" }, { empid: "bk6", text: "Flame" },

{ empid: "bk7", text: "Fazzer" }, { empid: "bk8", text: "FZ-S" }, { empid: "bk9", text: "Pulsar" },

{ empid: "bk10", text: "Shine" }, { empid: "bk11", text: "R15" }, { empid: "bk12", text: "Unicorn" }

];

// Declaration of other form components

$('#dropdown').ejDropDownList({

dataSource: BikeList,

fields: { id: "empid", text: "text", value: "text" }

});

$("#datepicker").ejDatePicker({enableStrictMode:true});

$("#timepicker").ejTimePicker();

$("#datetimepicker").ejDateTimePicker();

$("#numeric").ejNumericTextbox();

});

</script>

Step 3: When the DOM has loaded, attach the ‘valiadate’ method to the Form

In the document ready function, specify the validation messages and validation rules inside the ‘validate’ handler bounded for the Form.

There are many inbuilt methods available within the JQuery.Validate plugin. The simplest way to validate your Form is to use the Validate() method like $("Form ID").validate();. It will validate your Form before submitting it. We can also specify our own validation rules and validation messages for the Form elements.

Step 4: Specify the Validation rules and messages in the ‘Validate’ method

We need to specify the validation rules for the elements, by specifying the ‘name’ of the corresponding element and mentioning it as ‘required’. Similarly we need to specify the validation message using the ‘name’ of the element.

We can also specify the target, where the error messages needs to be displayed if the validation fails. Also it is possible to specify custom rules for validating an element.

Please refer the below code,

//Custom validation for Datepicker to check the date is between 2014-01-01 and 2015-03-01

$.validator.addMethod(

"usaDate",

function (value, element) {

var minDate = Date.parse("2014-01-01");

var maxDate = Date.parse("2015-03-01");

var valueEntered = Date.parse(value);

if (valueEntered < minDate || valueEntered > maxDate || isNaN(valueEntered)) {

return false;

}

return !/Invalid|NaN/.test(new Date(minDate));

"Please enter a date between 2014-01-01 and 2015-03-01 and in correct date format!"

);

// Setup form validation on the #register-form element

$("#register-form").validate({

// empty the ‘Ignore’ so that the components in hidden state will also be validated.

ignore:[],

errorElement: "div",

errorPlacement: function (error, element) {

//Specify where to display the error messages

error.appendTo("div#errors");

// Specify the validation rules

rules: {

firstname: "required",

lastname: "required",

datepicker: {

required:true,

usaDate: true

datetimepicker: "required",

timepicker: "required",

numeric: "required",

autocomplete: "required",

dropdown: "required",

email: {

required: true,

email: true

password: {

required: true,

minlength: 5

agree: "required"

// Specify the validation error messages

messages: {

firstname: "Please enter your first name",

lastname: "Please enter your last name",

password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long"

email: "Please enter a valid email address",

autocomplete: "Please select a car using EJ Autocomplete",

dropdown: "Please select a Bike using EJ Dropdownlist",

timepicker: "Please select a time using EJ TimePicker",

datetimepicker: "Please select a date and time using EJ DateTimePicker",

numeric:"Please specify the number using EJ numeric textbox"

submitHandler: function (form) {

form.submit();

}

});

You can learn more about the specified options and the list of other options available in JQuery validation, from its official documentation. Link for the same is provided below.

https://jqueryvalidation.org/documentation/

As you can see in the above code snippet, we have emptied the ‘ignore’ variable. If an element is in hidden state JQuery validate will not consider that element and it will not validate it. In some of our form component (like Dropdownlist) we maintain two input elements, the “name” attribute will be maintained in the hidden element so we need to specify ‘ignore’ as []. Then only JQuery validation works for those components.

Output of the sample

form

We have also attached sample for reference

JQuery validation to validate EJ controls

Note:

We have provided inbuilt client side validation support for our EJ Form components. Our Form components we have provided two API’s “validationMessages” and “validationRules” for validation purpose. You can refer the following class reference link to know about how to use these properties.

https://help.syncfusion.com/js/api/

Did you find this information helpful?

Yes

Comments (0)