ASP.NET MVC4 - Hidden field validation not clearing after value is set

Question

I have a hidden field on my form that is required. The hidden field is populated when a user selects a value from a textbox using jQuery UI autocomplete. I have setup my form validator to not ignore hidden fields so that the validation actually works. The validation does work, but when a user selects the desired option from the autocomplete, which then populates the hidden field, the validation message will not clear and will show until the form is posted. Do I need to manually call $('form').validate() or something once the hidden field gets set or is there a way to have this clear without any extra javascript code?

My View Model:

public class IndexViewModel
{
    public string SchoolName { get; set; }
    [Required]
    public int SchoolId { get; set; }
}

My View:

@model IndexViewModel

@using (Html.BeginForm())
{
    <p>
        @Html.LabelFor(m => m.SchoolName)
        @Html.TextBoxFor(m => m.SchoolName)
        @Html.HiddenFor(m => m.SchoolId)
        @Html.ValidationMessageFor(m => m.SchoolId)
    </p>

    <p>
        <input type="submit" />
    </p>
}

@section scripts {
    <script>
        $(function () {
            // stop validator from ignoring hidden fields
            var validator = $('form').data('validator');
            validator.settings.ignore = "";

            // schoolname autocomplete
            $('#SchoolName').autocomplete({
                minLength: 1,
                source: [
                    { label: "ABC University", value: "1" },
                    { label: "Oklahoma University", value: "2" },
                    { label: "Texas University", value: "3" }
                ],
                select: function (e, ui) {
                    e.preventDefault();
                    $('#SchoolId').val(ui.item.value);
                    $('#SchoolName').val(ui.item.label);
                }
            });
        });
    </script>
}

Thanks in advance.

Edit

Sparky, here is the rendered HTML:

<form action="/" method="post">
    <p>
        <label for="SchoolName">SchoolName</label>
        <input id="SchoolName" name="SchoolName" type="text" value="" />
        <input data-val="true" data-val-number="The field SchoolId must be a number." data-val-required="The SchoolId field is required." id="SchoolId" name="SchoolId" type="hidden" value="" />
        <span class="field-validation-valid" data-valmsg-for="SchoolId" data-valmsg-replace="true"></span>
    </p>
    <p>
        <input type="submit" />
    </p>
</form>

You should be showing us the rendered HTML of the form as seen by the browser. — Sparky
– Sparky, Commented Feb 27, 2014 at 18:23

Sparky · Accepted Answer · 2014-02-27 18:39:47Z

1

The reason the error message remains is because there are none of the normal validation triggers on a hidden field. Normally, for a single field, validation is triggered on key-up or on blur. The field is hidden so only the submit button will trigger a validation test of the hidden field when the whole form is validated.

However, you can programatically trigger a validation test on any field by calling the .valid() method at any time.

$('input[name="field"]').valid();  // force validation of 'input name="field"'

Here is a crude jsFiddle demo: http://jsfiddle.net/LJzfu/

Click 'submit' to show the "required" message on the hidden input called field2, which has no value.
Clicking the "go" button programatically puts a value in the hidden input. The form would now technically pass validation (upon submit) but the error message remains because we have no validation trigger.
Trigger validation by calling .valid() immediately after putting a value in the hidden field. This forces a validation test of the hidden field, which then hides the error message (as long as the validation rules are satisfied).

edited Feb 27, 2014 at 18:39

answered Feb 27, 2014 at 18:32

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

1 Comment

ryanulit Over a year ago

Worked like a charm. Wasn't sure what method to call, so thank you for pointing me in the right direction!

Collectives™ on Stack Overflow

ASP.NET MVC4 - Hidden field validation not clearing after value is set

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related