We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use our JS components with jquery validate plugin?

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.

  1. Numeric Textbox
  2. Currency Textbox
  3. Percentage Textbox
  4. MaskEdit Textbox
  5. Autocomplete
  6. DropDownList
  7. DatePicker
  8. DateTimePicker
  9. 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

 

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>

    <!-- The form that will be parsed by jQuery before submit -->

    <form action="" method="post" id="register-form" novalidate="novalidate">

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

        <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><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 />

        <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>

        <!--Container in which error messages will be displayed-->

        <div id="errors"></div>

    </form>

 

</body>

 

 

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

<script>

$(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.

http://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

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.

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

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7730 05/25/2017 05/25/2017 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon