JQuery Validation message shows on page load

Question

I have the following view:

@model GRCWebApp.ViewModels.NewClubInterestsViewModel

@{
ViewBag.Title = "Add Club Interests";
}
<div class="col-md-10 col-offset-md-1">
<h2 class ="text-success">Add Club Interests for @Html.DisplayFor(model => model.Name)</h2>
</div>

@using (Html.BeginForm("NewInterests", "Club", FormMethod.Post))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <hr />
    <div class="row">
        <div class="col-md-8">
            <div class="well bs-component">
                @Html.ValidationSummary(true, "", new { @class = "text-danger"   })
                @Html.HiddenFor(x => Model.ClubId)
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-1">
                        <h3>Tick the areas your club is interested/runs events in</h3>
                    </div>
                </div>
                <div class="col-md-offset-1">


                    @for (int i = 0; i < Model.ClubTypeInterests.Count();  i++)
                    {
                        <div>
                            @Html.HiddenFor(x => Model.ClubTypeInterests[i].InterestId)
                            @Html.CheckBoxFor(x => Model.ClubTypeInterests[i].selected)
                            @Html.LabelFor(x => Model.ClubTypeInterests[i].InterestName, Model.ClubTypeInterests[i].InterestName)
                        </div>
                    }
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-offset-1 col-md-12">
                            <input type="submit" name="Submit" value="Next" class="btn btn-success btn-lg" />&nbsp;to setup Online membership&nbsp;
                            <input type="submit" name="Submit" value="Complete" class="btn btn-warning btn-sm" />&nbsp;to just provide online event entries
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

}

@using (Html.BeginForm("AddInterest", "Club"))
{
@Html.AntiForgeryToken()


<hr />
<div class="row">
    <div class="col-md-8">
        <div class="well bs-component">
            <div class="form-group">
                <div class="col-md-12 col-md-offset-1">
                    <h3>Not listed? - Add extras here</h3>
                </div>
            </div>
            @Html.HiddenFor(model => model.ClubTypeId)
            @Html.HiddenFor(model => model.ClubId)
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-inline">
                <div class="form-group">
                    <div class="row col-md-offset-1 col-md-11">
                        <div class="col-md-4">
                            @Html.LabelFor(model => model.InterestName, htmlAttributes: new { @class = "control-label" })
                            @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.InterestName, "", new { @class = "text-danger" })
                        </div>
                        <div class="col-md-5">
                            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label" })
                            @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                        </div>
                        <input type="submit" value="Add" class="btn btn-info" style="margin-top: 22px" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}


@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Overtime the page loads the Validation message shows for InterestName in the second form AddInterest.

The Get method for the whole form is:

        [HttpGet]
    public ActionResult NewInterests(NewClubInterestsViewModel model, int id)
    {
        //Find the Club and then pass its id to the ViewModel
        var club = db.Clubs.Find(id);
        //model.ClubId = club.ClubId ;
        //Interests List         
        IEnumerable<Interest> allExistingInterests;
        //Generate a list of the interests that apply to that type of club
        using (ApplicationDbContext context = new ApplicationDbContext())
        {
            allExistingInterests = context.Interests
                .Where(s => s.ClubTypeId == club.ClubTypeId)
                .OrderBy(s => s.InterestName)
                .ToList();
        }
        IEnumerable<int> clubInterestIds = club.ClubInterests.Select(x => x.InterestId).ToList();
        //Generate the ViewModel with the appropriate Interests
        var viewModel = new NewClubInterestsViewModel
        {
            ClubId = club.ClubId,
            Name = club.Name,
            ClubTypeId = club.ClubTypeId,
            ClubTypeInterests =
                allExistingInterests.Select(
                    x => new ClubInterestsViewModel { InterestId = x.InterestId, InterestName = x.InterestName, selected = clubInterestIds.Contains(x.InterestId) }).ToArray()
        };
        return View(viewModel);
    }

What do I need to do to stop the validation message showing on load?

Answer 1

Remove the NewClubInterestsViewModel model parameter from your GET method. It should be just

public ActionResult NewInterests(int id)

The first step in the model binding process is that instances of your parameters are initialized and then its properties are set based on form values, route values, query string values etc. In your case there are no values to set, so the properties of your model are their defaults, but because you have validation attributes on your properties, validation fails and errors are added to ModelState which are then displayed in the view.