Question

Good morning one and all.

For one reason or another, I have a layer of server side validation on a model’s dropdown list:

 public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (SomethingVisible && DropDownListSelection == 0)
        {
            yield return new ValidationResult("Please make a selection", new[] { "DropDownListSelectionId"});
        }
    }


<div class="editor-field">
                            @Html.DropDownListFor(x => x.DropDownListSelectionId, new SelectList(Model.DropDownListSelection, "DropDownListSelectionId", "DropDownListSelectionName"))
                            <br />
                            @Html.ValidationMessageFor(model => model.DropDownListSelectionId)
                        </div>

This works fine and dandy and shows the appropriate validation error when !Model.IsValid. Lovely.

However, as some such forms can be quite tall (I know, I know, nasty) and this validation can go missing i.e. you have to scroll down to see the validation error, some people won’t like to scroll.

As such, what I would like to do is use jquery/javascript to set focus on the element that is validated, how would I go about doing this?

Apologies for the thick question.

Answer 1

$(function(){
    $('input, select, textarea').each(function(){
         if($(this).hasClass('input-validation-error'))
              $(this).focus();
    });
});