In MVC 5, How do I remove the required attribute depending on another dropdown value?

Currently, the form is working as intended until you submit the form with the
Usage_Status dropdown selection with value a of '2' and then switch to any other value and submit again. The javascript validation message 'The Assigned User field is required.' appears and does not go away after switching values on the dropdown and submitting again. Is it possible to remove the required attribute, or set it on the condition that '2' is selected?

HTML:

<div class="row">

        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Usage_Status, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Usage_Status", new SelectList(statuses, "ID", "Name"), new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Usage_Status)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Assigned_User, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

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

                @Html.ValidationMessageFor(model => model.Assigned_User)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Department, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Department", new SelectList(departments, "ID", "Name"), string.Empty, new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Department)

            </div>

        </div>

    </div>

JavaScript:

$(document).ready(function () {

$('#Usage_Status').change(function (e) {

    //If item is being used, require a user and department. Otherwise, disabled those fields.

    if ($('#Usage_Status').val() == "2") {

        $('#Assigned_User').rules('add', 'required');

        $('#Assigned_User').removeAttr('disabled');

    } else {

        $('#Assigned_User').rules('remove', 'required');

        $('#Assigned_User').removeAttr('required');

        $('#Assigned_User').attr('disabled', 'disabled');

    }



});

asked Nov 28 '18 at 17:01

sjohn285

12211

Is it marked as required in your model?

– Sean T
Nov 28 '18 at 17:10

Yes, it is marked in the model.

– sjohn285
Nov 28 '18 at 17:16

So when you submit it, the server side will bounce it too. client & server side validation are separate processes.

– Sean T
Nov 28 '18 at 17:18

I just tried removing the attribute in the model, and it has the same issue.

– sjohn285
Nov 28 '18 at 17:18

add a comment |

HTML:

<div class="row">

        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Usage_Status, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Usage_Status", new SelectList(statuses, "ID", "Name"), new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Usage_Status)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Assigned_User, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

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

                @Html.ValidationMessageFor(model => model.Assigned_User)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Department, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Department", new SelectList(departments, "ID", "Name"), string.Empty, new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Department)

            </div>

        </div>

    </div>

JavaScript:

$(document).ready(function () {

$('#Usage_Status').change(function (e) {

    //If item is being used, require a user and department. Otherwise, disabled those fields.

    if ($('#Usage_Status').val() == "2") {

        $('#Assigned_User').rules('add', 'required');

        $('#Assigned_User').removeAttr('disabled');

    } else {

        $('#Assigned_User').rules('remove', 'required');

        $('#Assigned_User').removeAttr('required');

        $('#Assigned_User').attr('disabled', 'disabled');

    }



});

asked Nov 28 '18 at 17:01

sjohn285

12211

Is it marked as required in your model?

– Sean T
Nov 28 '18 at 17:10

Yes, it is marked in the model.

– sjohn285
Nov 28 '18 at 17:16

So when you submit it, the server side will bounce it too. client & server side validation are separate processes.

– Sean T
Nov 28 '18 at 17:18

I just tried removing the attribute in the model, and it has the same issue.

– sjohn285
Nov 28 '18 at 17:18

add a comment |

HTML:

<div class="row">

        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Usage_Status, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Usage_Status", new SelectList(statuses, "ID", "Name"), new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Usage_Status)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Assigned_User, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

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

                @Html.ValidationMessageFor(model => model.Assigned_User)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Department, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Department", new SelectList(departments, "ID", "Name"), string.Empty, new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Department)

            </div>

        </div>

    </div>

JavaScript:

$(document).ready(function () {

$('#Usage_Status').change(function (e) {

    //If item is being used, require a user and department. Otherwise, disabled those fields.

    if ($('#Usage_Status').val() == "2") {

        $('#Assigned_User').rules('add', 'required');

        $('#Assigned_User').removeAttr('disabled');

    } else {

        $('#Assigned_User').rules('remove', 'required');

        $('#Assigned_User').removeAttr('required');

        $('#Assigned_User').attr('disabled', 'disabled');

    }



});

asked Nov 28 '18 at 17:01

sjohn285

12211

HTML:

<div class="row">

        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Usage_Status, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Usage_Status", new SelectList(statuses, "ID", "Name"), new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Usage_Status)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Assigned_User, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

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

                @Html.ValidationMessageFor(model => model.Assigned_User)

            </div>

        </div>



        <div class="form-group col-sm-4">

            @Html.LabelFor(model => model.Department, new { @class = "control-label col-md-12" })

            <div class="col-md-10">

                @Html.DropDownList("Department", new SelectList(departments, "ID", "Name"), string.Empty, new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Department)

            </div>

        </div>

    </div>

JavaScript:

$(document).ready(function () {

$('#Usage_Status').change(function (e) {

    //If item is being used, require a user and department. Otherwise, disabled those fields.

    if ($('#Usage_Status').val() == "2") {

        $('#Assigned_User').rules('add', 'required');

        $('#Assigned_User').removeAttr('disabled');

    } else {

        $('#Assigned_User').rules('remove', 'required');

        $('#Assigned_User').removeAttr('required');

        $('#Assigned_User').attr('disabled', 'disabled');

    }



});

jquery asp.net-mvc data-annotations

asked Nov 28 '18 at 17:01

sjohn285

12211

asked Nov 28 '18 at 17:01

sjohn285

12211

asked Nov 28 '18 at 17:01

sjohn285

12211

asked Nov 28 '18 at 17:01

sjohn285

12211

asked Nov 28 '18 at 17:01

sjohn285

12211

Is it marked as required in your model?

– Sean T
Nov 28 '18 at 17:10

Yes, it is marked in the model.

– sjohn285
Nov 28 '18 at 17:16

So when you submit it, the server side will bounce it too. client & server side validation are separate processes.

– Sean T
Nov 28 '18 at 17:18

I just tried removing the attribute in the model, and it has the same issue.

– sjohn285
Nov 28 '18 at 17:18

add a comment |

Is it marked as required in your model?

– Sean T
Nov 28 '18 at 17:10

Yes, it is marked in the model.

– sjohn285
Nov 28 '18 at 17:16

So when you submit it, the server side will bounce it too. client & server side validation are separate processes.

– Sean T
Nov 28 '18 at 17:18

I just tried removing the attribute in the model, and it has the same issue.

– sjohn285
Nov 28 '18 at 17:18

Is it marked as required in your model?

– Sean T
Nov 28 '18 at 17:10

Yes, it is marked in the model.

– sjohn285
Nov 28 '18 at 17:16

So when you submit it, the server side will bounce it too. client & server side validation are separate processes.

– Sean T
Nov 28 '18 at 17:18

I just tried removing the attribute in the model, and it has the same issue.

– sjohn285
Nov 28 '18 at 17:18

add a comment |

1 Answer
1

active

oldest

votes

If you're doing conditional validation, e.g one field's value in your form defines validation for another field you need an additional library. I use expressive annotations

answered Nov 28 '18 at 17:19

Sean T

1,356715

I should probably make another question for this, but I'm hoping you can help me quickly. Is this what I would put into the model? [RequiredIf("Usage_Status == '2'")] [Display(Name = "Assigned User")] public string Assigned_User { get; set; }

– sjohn285
Nov 28 '18 at 17:40

@sjohn285 Yep, just pass the conditions in as a string

– Sean T
Nov 29 '18 at 9:37

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53524569%2fin-mvc-5-how-do-i-remove-the-required-attribute-depending-on-another-dropdown-v%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

If you're doing conditional validation, e.g one field's value in your form defines validation for another field you need an additional library. I use expressive annotations

answered Nov 28 '18 at 17:19

Sean T

1,356715

I should probably make another question for this, but I'm hoping you can help me quickly. Is this what I would put into the model? [RequiredIf("Usage_Status == '2'")] [Display(Name = "Assigned User")] public string Assigned_User { get; set; }

– sjohn285
Nov 28 '18 at 17:40

@sjohn285 Yep, just pass the conditions in as a string

– Sean T
Nov 29 '18 at 9:37

add a comment |

If you're doing conditional validation, e.g one field's value in your form defines validation for another field you need an additional library. I use expressive annotations

answered Nov 28 '18 at 17:19

Sean T

1,356715

I should probably make another question for this, but I'm hoping you can help me quickly. Is this what I would put into the model? [RequiredIf("Usage_Status == '2'")] [Display(Name = "Assigned User")] public string Assigned_User { get; set; }

– sjohn285
Nov 28 '18 at 17:40

@sjohn285 Yep, just pass the conditions in as a string

– Sean T
Nov 29 '18 at 9:37

add a comment |

If you're doing conditional validation, e.g one field's value in your form defines validation for another field you need an additional library. I use expressive annotations

answered Nov 28 '18 at 17:19

Sean T

1,356715

If you're doing conditional validation, e.g one field's value in your form defines validation for another field you need an additional library. I use expressive annotations

answered Nov 28 '18 at 17:19

Sean T

1,356715

answered Nov 28 '18 at 17:19

Sean T

1,356715

answered Nov 28 '18 at 17:19

Sean T

1,356715

answered Nov 28 '18 at 17:19

Sean T

1,356715

I should probably make another question for this, but I'm hoping you can help me quickly. Is this what I would put into the model? [RequiredIf("Usage_Status == '2'")] [Display(Name = "Assigned User")] public string Assigned_User { get; set; }

– sjohn285
Nov 28 '18 at 17:40

@sjohn285 Yep, just pass the conditions in as a string

– Sean T
Nov 29 '18 at 9:37

add a comment |

I should probably make another question for this, but I'm hoping you can help me quickly. Is this what I would put into the model? [RequiredIf("Usage_Status == '2'")] [Display(Name = "Assigned User")] public string Assigned_User { get; set; }

– sjohn285
Nov 28 '18 at 17:40

@sjohn285 Yep, just pass the conditions in as a string

– Sean T
Nov 29 '18 at 9:37

I should probably make another question for this, but I'm hoping you can help me quickly. Is this what I would put into the model? [RequiredIf("Usage_Status == '2'")] [Display(Name = "Assigned User")] public string Assigned_User { get; set; }

– sjohn285
Nov 28 '18 at 17:40

@sjohn285 Yep, just pass the conditions in as a string

– Sean T
Nov 29 '18 at 9:37

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl