[ required if is not working on client side validation ]

At my model in my asp.net mvc app, i used RequiredIf attributes.

Model

[RequiredIf("CustomerType== 'B'", ErrorMessage = "Please enter customer name")]
[Display(Name = "Customer Name")]
[DataMember(Name = "CustomerName")]
public String CustomerName{ get; set; }

[Required(ErrorMessage = "Please select customer type")]
[Display(Name = "Customer Type")]
[DataMember(Name = "CustomerType")]
public String CustomerType { get; set; }

View

 @using (Html.BeginForm(null,null,FormMethod.Post,new { @class ="transactionForm" })){

 <td>@Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })</td>
 <td>@(Html.Kendo().TextBox()
       .Name("MusteriAd")
       .HtmlAttributes(new { style = "width: 250px; height: 32px;" }))
     @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
 </td>

I am sending the form to server via ajax post, and here my function;

function SaveRecord(action, controller, param) {

$('.error').remove(); 

var form = $(".transactionForm");

var validator = form.kendoValidator().data("kendoValidator");

if (validator.validate()) {

    var data = form.serialize();

    $.ajax({
        url: '/' + controller + '/' + action,
        dataType: 'json',
        type: 'POST',
        data: data,
        success: function (response) {
            if (response !== null && !response.success) {

                DisplayErrors(response.error);

            }
            else {

            }

        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });
}
}

Well with this structure, i handle server side validation perfect, however on client side - validator.validate() section, it only validate the input with required attributes.

Should i write extra code for client side validation of these requiredif inputs or is there any other ways to handle this at razor side or js side?

Answer 1

I think there is no way to handle this by leaving this to kendo-ui. Because, kendo produces the html for Customer Type input;

<input data-val="true" data-val-required="Please enter customer name"    id="CustomerType" name="CustomerType" style="width: 250px; display: none;" type="text" data-role="dropdownlist" class="k-valid">

and Customer Name

<input class="k-textbox k-valid" id="CustomerName" name="CustomerName" style="width: 250px; height: 32px;">

data-val-required is not produced for requiredIf attributed member by kendo.

So, i am checking these fields only at server side.