Required Field Validation in ASP MVC using Kendo UI - validation

Question

I have a textbox and want to display the field is required when the form gets submitted. The error message do appear in case i click on the textbox and tab to go to next textbox. I have the 'Required' data annotation on my model like this:
[DisplayName("Shipment Number")]
[Required]
public string ShipmentNumber { get; set; }
My View looks like this:
<div class="col-sm-8">
#Html.TextBoxFor(model => model.ShipmentNumber, new {#class = "form-control", #maxlength = "8", #title = "Maximum length is 8"})
#Html.ValidationMessageFor(model => model.ShipmentNumber)
</div>
Oh, i also added these in $function:
$("form").kendoValidator();
$.validator.setDefaults({
ignore: ""
});
When i leave the textbox blank and submit the form, the form gets submitted without showing the error message i.e. 'The Shipment Number is required!'.
P.S: I also tried DataAnnotation:
[Required(ErrorMessage = "ShipmentNumber Is Required")]
Does anyone know how i can achieve this?
Update:
This fixed it:
Changes in Razor code to make textbox required and added required error message.
#Html.TextBoxFor(model => model.ShipmentNumber, new {#class = "form-control", #maxlength = "8", #title = "Maximum length is 8", data_required_msg = "Shipment Number is required!", required = "required" })
In button submit code in javascript, did this:
var validator = $(".form-horizontal").kendoValidator().data("kendoValidator");
if (validator.validate()) {
//code that needs to be executed if it is valid
}
Note: I also got rid of data annotation from modal class, #Html.ValidationMessageFor and $("form").kendoValidator code.

Answer 1

Try forcing the validation when you click your button:
// Validate the input when the Save button is clicked
$("#save").on("click", function() {
if (validator.validate()) {
// If the form is valid, the Validator will return true
save();
}
});
or
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets has been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
See http://docs.telerik.com/kendo-ui/framework/validator/overview