Data Annotations in MVC , Required is not showing on button click

I am practicing MVC Web Application .NET Framework . I got confused here as I have already installed NuGet package of jQuery Library of Unobtusive.Validation but still Required Field is not working. Here is my class of Student

    {
        [Required (ErrorMessage ="Student Id is required")] 
        public int Id { get; set; }
        [Required(ErrorMessage = "Name is required")]
        public string  Name { get; set; }
        [Required(ErrorMessage = "Email is required")]
        public string Email { get; set; }
        [Required(ErrorMessage = "Contact is required")]
        public string Contact{ get; set; }
    }

and here is StudentData.cshtml file in which the combine code of c# and Html.


@{
    ViewBag.Title = "Student Data";
}

<h2>StudentData</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
<div class="form-horizontal">
    
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Contact, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Contact, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Contact, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save Record" class="btn btn-primary" />
        </div>
    </div>
</div>
}

How can I solve this. I have already reinstall the NuGet package Unobtusive latest version.

2 answers

  • answered 2021-01-17 21:41 meysam asadi

    I have encountered the same problem before. I think the javascript files of the program are in conflict with each other, it is better to check how to introduce the project javascript files.

  • answered 2021-01-18 07:06 Gerben

    For the client-side validation to work you need jQuery, the jQuery Validation plugin and jQuery Unobtrusive Validation. You can load all three of them from a CDN, for example:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>

    You can add the script references to your view to test if it works, but normally you would add jQuery to _Layout.cshtml and the other two to a partial view called _ValidationScriptsPartial.cshtml. This is the default configuration if you use the latest project template.

    Review the required configuration here: https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-5.0