Why is my form validation firing ‘has-success’ instead of ‘has-error’

In my MVC web app I have a form with 2 required fields Email and Name which I am trying to validate using ValidationMessageFor:

@using (Html.BeginForm(MVC.Downloads.ActionNames.RequestEvaluation, MVC.Downloads.Name, FormMethod.Post, new { novalidate = "novalidate", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    <div class="form-group">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <div class="input-group login-input">
                                <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "Your email address", @title = "Please enter your email" })
                            </div>
                            <span class="help-block">@Html.ValidationMessageFor(m => m.Email)</span>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <div class="input-group login-input">
                                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                @Html.TextBoxFor(m => m.Name, new {@class = "form-control", @placeholder = "Your name", @title = "Please enter your name"})
                            </div>
                            <span class="help-block">@Html.ValidationMessageFor(m => m.Name)</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
                            <div class="input-group login-input">
                                <span class="input-group-addon"><i class="fa fa-file-text"></i></span>
                                @Html.TextAreaFor(m => m.Notes, new { @class = "form-control", @placeholder = "Anything else you would like to tell us?", @title = "Anything else you would like to tell us?" })
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
                            <button type="submit" class="btn btn-success btn-group-lg">Request Evaluation</button>
                        </div>
                    </div>
                }

The validation works as expected when both fields are empty – the fields turn red to indicate that the fields are required

The problem I have is when only one of the fields is filled in the validation initially turns green (when I then click anywhere on the screen it turns red)

I have looked in Chrome dev tools and see that form-group has-success is being fired instead of form-group has-error but cannot see why – can someone help me here please?


Source: forms

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.