Display Custom Errors in Html.ValidationMessageFor via jQuery

Question

My ASP.NET MVC 5 application's razor view uses two checkboxes:

<div class="form-group">
            @Html.LabelFor(model => model.BoolField1, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.BoolField1, new { htmlAttributes = new { @class = "form-control", @id = "bool1" } })
                    @Html.ValidationMessageFor(model => model.BoolField1, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.BoolField2, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.BoolField2, new { htmlAttributes = new { @class = "form-control", @id = "bool2" } })
                    @Html.ValidationMessageFor(model => model.BoolField2, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

I'm trying implement the rule that BoolField2 cannot be true unless BoolField1 is also true. My jquery code:

function applyRule() {
        var bool1Status = document.getElementById('bool1').checked;
        var bool2Status = document.getElementById('bool2').checked;

        if (bool2Status == true && bool1Status == false) {
        // This is the sole error.
        // Generate a suitable error message and display (how?)

        }
    }

The custom error generated at this code must be displayed into Html.ValidationMessageFor. How can I achieve this?

You can get the id of the checkbox by viewing the source of the page. :) — Cyval
– Cyval, Commented Jan 3, 2016 at 11:38
I already got the ids of both the checkboxes (refer to my question again). But the problem is to manipulate the content emited by ValidationMessageFor helper method. — Vivekanand Pujar
– Vivekanand Pujar, Commented Jan 3, 2016 at 12:54

Ashish Shukla · Accepted Answer · 2016-01-04 09:27:18Z

1

First you need to correct syntax for EditorFor () it should be like following

 @Html.EditorFor(model => model.BoolField1, new { @class = "form-control", @id = "bool1" })

instead of

 @Html.EditorFor(model => model.BoolField1, new { htmlAttributes = new { @class = "form-control", @id = "bool1" } })

Now after having this correction you may write custom jQuery logic to achieve same. Here is the code.

$(function () {
    $('#bool2').on('click', function (e) {
        //Get the state of 1st checkbox
        var isFirstCheck = $('#bool1').is(":checked");
        if (isFirstCheck==false) {
            //dispay message if you need. Below line of code will prevent user to select 2nd checkbox
            e.preventDefault();
        }
    })
});

answered Jan 4, 2016 at 9:27

Ashish Shukla

1,3041 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display Custom Errors in Html.ValidationMessageFor via jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related