The Kendo UI Validator framework is a very easy method for performing client-side form validation. It works well with HTML5 form validation attributes and supports a host of in-built validation procedures while conveniently allowing you to also set your own custom rules handling methods.
In this Kendo UI Validator blog I will show you can easily perform simple form data validation. You can use this Kendo Validator to validate your control.
First we have to declare the following Kendo dependencies, for this you will first have to include all the files:
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
Next, we will look at some steps that will guide you on how to apply validation functionality on form control.
1) For this, just make one simple HTML Form.
<form id="students">
<h3>Student Details</h3>
<ul>
<li>
<label for="fullname" class="required">Student Name</label>
<input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full student name" required validationMessage="Please enter {0}" />
</li>
In the above script we have used a single textbox to enter full name of students. And we will gave it class=”k-textbox” attribute which is used to simply define the style of textbox.
The “required” attribute will check if a student’s name is blank or not. If student’s name is blank then we have to display a validation Message which is written in validationMessage attribute.
You can notice that in validationMessage attribute we have included {0}value, which means that it will replace this token by a name attribute of that input element. The Validation Message is “Please Enter Full Name”
<li>
<label for="medium">Medium</label>
<select name="medium" id="medium" required data-required-msg="Select your medium">
<option>Gujarati</option>
<option>Hindi</option>
<option>English</option>
</select>
<span class="k-invalid-msg" data-for="medium"></span>
</li>
In the above code, we have one drop down list to select student medium. If no medium is selected an error message will be displayed which is written in “data-required-msg” attribute.
<li>
<label for="age">Age</label>
<input id="age" name="Age" type="text" min="15" max="20" value="15" required data-max-msg="Enter age between 15 and 20" />
<span class="k-invalid-msg" data-for="Age"></span>
</li>
As you can see, we have defined maximum and minimum value for student age in the above script.
<li>
<label for="email" class="required">Email</label>
<input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname@example.net" required data-email-msg="Email format is not valid" />
</li>
Here, if email ID is invalid, we will display a validation message. But if you don’t want to make this filed compulsory then remove “required” attribute so that it accepts a blank input but will not accept a wrong email id format.
<li>
<label for="tel" class="required">Contact Number</label>
<input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Please enter a ten digit phone number" required
validationMessage="Please enter a ten digit phone number"/>
</li>
This filed will only accept a 10 digit value, if you enter a value of more than 10 digits, an error message will be displayed.
<li>
<label for="state" class="required">State</label>
<input type="state" id="state" name="state" required validationMessage="Please select State"/>
<span class="k-invalid-msg" data-for="state"></span>
</li>
In this script you have an auto-complete field, which means that if you enter any character that matches the database with first character then it will show you a suggestion. Later, I will show you how to make it into an auto-complete field.
<li class="accept">
<input type="checkbox" name="Accept" required validationMessage="Acceptance is required" /> I accept the terms and condition.
</li>
Here, we have a check box field. If it’s left unchecked it will generate a validation message.
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
This is a simple submit button. On its click event, we have checked whether the form is validated or not by using “Kendo UI Validator” functionality. Later in this blog, we will see how this process works.
<li class="status">
</li>
</ul>
</form>
2)
If you want to apply a style then make one style. You will have to make classes for specific Kendo controls.
<style scoped>
.k-textbox {
width: 20.8em;
}
#students {
width: 510px;
height: 323px;
margin: 30px auto;
padding: 10px 20px 20px 170px;
background: url('../../images/sample.png') transparent no-repeat 0 0;
}
Here we set background image for our student form.
#students h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#students ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#students li {
margin: 10px 0 0 0;
}
label {
display: inline-block;
width: 100px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept{
padding-left:90px;
}
.status {
padding-left: 90px;
padding-bottom:650px;
this }
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 1px;
}
</style>
In the above style tag, we have defined styles for different classes related to specific form controls.
3)
Now, prepare yourself for the main part. Define a script which handles and validates Kendo Controls.
<script>
$(document).ready(function() {
var data = [
"Gujarat",
"Delhi",
"MP",
"Maharastra",
];
Here we define data which is used for auto-complete. This data is for state fields which give us useful suggestions. You can see this in following lines of code below:
$("#state").kendoAutoComplete({
dataSource: data,
separator: ", "
});
Next, we define our state input field using kendoAutoComplete functionality. Here we also define dataSource to receive suggestions.
$("#medium").kendoDropDownList({
optionLabel: "--Select Medium--"
});
We will also define our medium Dropdown list input field using kendoDropDownList functionality. We add one option here using optionLabel object.
$("#age").kendoNumericTextBox();
var validator = $("#students").kendoValidator().data("kendoValidator"),
status = $(".status");
Finally, we declare the validator variable as “kendoValidator” which will validate our form “students”.
In following form submit() method, we use validate() event of kendo.ui.Validator to check whether any validation occurred on the form or not. If the form is validated, a success message is displayed in the status filed.
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Successfully registered !")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Error !!! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
Now that you have successfully performed the Kendo UI form data validation, you can have a look at two screenshots that I have attached for the above code.
1)
Auto Complete State field ( you can also see the background image).
2) Here, you can see All Validation Messages.
Now you know much more about how to perform simple form validation with Kendo UI Validator, you can give this a try.
Happy coding!!
Reference link :
http://trykendoui.telerik.com/ABAs/5
http://demos.telerik.com/kendo-ui/web/validator/index.html