CODEWITHSUNDEEP
validationasp.net-mvc-4kendo-asp.net-mvc
sanjeev40084
sanjeev40084

Reputation: 9617

Required Field Validation in ASP MVC using Kendo UI

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.

Upvotes: 4

Views: 7805

Answers (1)

Steve Greene
Steve Greene

Reputation: 12304

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

Upvotes: 1

Related Questions