CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4validationkendo-ui
GPGVM
GPGVM

Reputation: 5619

Kendo Validator not firing for MVC partial view

I am struggling with figuring out why my kendo validation isn't working...but first let me back up.

I have a mvc 5 web app with a page and a button. Click the button and a modal kendoWindow displays a partial view to capture two inputs from the user. I had what I consider the traditional MVC validation process.

[Validator(typeof(MyModelValidator))]
public partial class MyModel
{ ... }

However it would post to the controller with an invalid model (I was testing for invalid submission) state then immediately throw an error as it couldn't quite deal with updating the "modal" partial view it just came from with the validation check required field message.

So after research and reading I determined...perhaps incorrectly...that using the kendo validator was the only option for this scenario.

So I set about implementing following Telerik docs.

In the model I have 5 properties but I decorated just one figuring I'll get it hashed out on one before doing them all. So I commented out my MVC validator and added this in my model:

[Required]
[Display(Name = "Financial Named")]
public virtual string FinancialInstitutionName { get; set; }

In the cshtml:

 ....snip.....
    @Html.LabelFor(model => model.FinancialInstitutionName):
 </td>
 <td>
    @Html.EditorFor(model => model.FinancialInstitutionName)
    @Html.ValidationMessageFor(model => model.FinancialInstitutionName)
 </td>
 .....and further down.....
 $(function ()
 {
    $("#formCreateEditFinancier").kendoValidator();
 });

And the controller:

public ActionResult CreateEditFinancialInstitute(int financierId, int isChanging)
{
  var model = new FinancierModel();
  return
  PartialView("~/.../CreateEditFinancialInstitute.cshtml", model);
}

Now the above is what generates / is consumed when the partial view is rendered in the modal dialog.

The following is what is used by the "parent" page with the button that launches the modal dialog...

 var window = $("#window").kendoWindow(
 {
    modal: true,
    width: "600px",
    height: "400px",
    title: "Fill in the blanks eh...",
    actions: ["Close"],
    content: {
               url: "@Html.Raw(Url.Action("CreateEditFinancialInstitute", "FinancingPayment"))",
               data: { financierId: financierid, isChanging: ischanging }
              }
   });
   window.data('kendoWindow').center();

Finally here is the html of the modal window that is generated.

<form id="formCreateEditFinancier" action="/FinancingPayment/CreateEditFinancialInstitute" method="post" novalidate="novalidate" data-role="validator">

What's that novalidate attribute all about? I read up on that and it seems to be something html 5 is injecting...I'm certainly not specifying it. So I added a json line to get rid of it.

$("#formCreateEditFinancier").removeAttr("novalidate");

The HTML renders without it but I still have no client side validation????

So in the end all I want is some form of validation....I mean worse case I could use some really old school json check for field length etc...but was hoping to use a more current approach.

EDIT

Based upon iceburg's suggestion I modified my modal form window javascript to this:

var validator = $("#formCreateEditFinancier").kendoValidator().data("kendoValidator");

    $("form").submit(function (event)
    {
        event.preventDefault();
        if (validator.validate())
        {
            alert('gtg');
        }
        else
        {
            alert('fail');
        }
    });

Now when I loaded the form and hit submit (no fields completed) it displays the alert GTG....wait it should have failed!

Looking now to see if the HTML is rendering the validation decorations.

<input name="FinancialInstitutionName" class="text-box single-line" id="FinancialInstitutionName" type="text" value="" data-val="true" data-val-required="The Financial Named field is required.">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="FinancialInstitutionName"></span>

It appears the "required" attribute is not getting set.If I edit the HTML in F12 Dev Tools adding the required attribute then hit submit my validation works as it should...so it seems the problem lies with how my model decorations are being rendered.

SOLVED

So with iceburg's guidance I found my DataAnnotations were not rendering properly....actually turns out they were but I was missing the validator js files as explained here:

Data annotations not working in view model

Upvotes: 1

Views: 4413

Answers (1)

iceburg
iceburg

Reputation: 1768

Validation generally works by validating input fields in a form when the form is submitted. You could change your Url Action to a input type submit and it should work. Or manually call the kendo validators .validate() method in your button click handler. keep a reference to your validator:

var validator = $("#formCreateEditFinancier").kendoValidator().data("kendoValidator");

then on button click:

if(validator.validate()){
//submit
}
else{
//not valid show errors.
}

See here: http://demos.telerik.com/kendo-ui/validator/index

As for the no validate I believe kendo or mvc is adding that. It tells the browser not to use the HTML 5 built in validation.

Upvotes: 1

Related Questions