How to show validation summary error messages on an alert box in an asp.net core 6 web application?

Question

"I'm working on an ASP.NET Core 6 application, and I need to display validation summary data in an alert box. I want to show any validation errors or summary information in a user-friendly alert box. How can I achieve this in ASP.NET Core 6?"

here is my code...

<div class="container">
    <form class="w-100" asp-controller="Home" asp-action="Index" method="post">
        <div asp-validation-summary="All" ></div>
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Name">Username</label>
                <input asp-for="Name" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="Name"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="password">Password</label>
                <input asp-for="password" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="password"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="ConfirmPassword">Confirm Password</label>
                <input asp-for="ConfirmPassword" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="ConfirmPassword"></span></small> *@
            </div>
        </div>
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Age">Age</label>
                <input asp-for="Age" class="form-control" class="w-100" />
                @* <small><span asp-validation-for="Age"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="Batch">Batch</label>
                <input asp-for="Batch" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="Batch"></span></small> *@
            </div>
        </div>
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Email">E-mail</label>
                <input asp-for="Email" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="Email"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="YourWebsite">You website name</label>
                <input asp-for="YourWebsite" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="YourWebsite"></span></small> *@
            </div>
            <div>
                <label class="form-label" asp-for="Phone">Enter mobile no.</label>
                <input asp-for="Phone" class="form-control" class="w-100"/>
                @* <small><span asp-validation-for="Phone"></span></small> *@
            </div>
        </div>
        <div>
            <label class="form-label" asp-for="yourAddress"></label>
            <input asp-for="yourAddress" class="form-control" class="w-100" />
            @* <small><span asp-validation-for="yourAddress"></span></small> *@
        </div>

        <br />
        <br />
        <div>
            <button class="btn btn-danger text-white">submit now !</button>
        </div>
    </form>
</div>

here is my model class...

    public class CandidateModel
    {
        [Required(ErrorMessage ="field should be filled !")]
        public string Name { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Range(minimum:18, maximum:35,ErrorMessage ="Applicable for age 18 to 35")]
        public int? Age { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Range(minimum:2015, maximum:2023, ErrorMessage ="only for batch 2015 to 2023")]
        public string Batch { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [RegularExpression("^([0-9a-zA-Z]([-\\.\\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\\w]*[0-9a-zA-Z]\\.)+[a-zA-Z]{2,9})$",ErrorMessage ="invalid e-mail")]
        public string Email { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [RegularExpression("(?=^.{8,}$)((?=.*\\d)|(?=.*\\W+))(?![.\\n])(?=.*[A-Z])(?=.*[a-z]).*$", ErrorMessage = "write atleast : one-digit, one-small character, one-capital letter, one-special character and 8-character long ")]
        public string password { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Compare("password",ErrorMessage ="please confirm your password")]
        public string ConfirmPassword { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [Url(ErrorMessage ="enter correct url please !")]
        public string YourWebsite { get; set; }

        [Required(ErrorMessage = "field should be filled !")]
        [MaxLength(10,ErrorMessage ="only 10 number allowed")]
        [MinLength(10,ErrorMessage = "only 10 number allowed")]
        public string Phone { get; set; }


        [Display(Name="your Address please")]
        [Required(ErrorMessage = "field should be filled !")]
        public string yourAddress { get; set; }
    }
}

here is my controller...

public IActionResult Index()
{
    return View();
}

[HttpPost]
public IActionResult Index(CandidateModel cmd)
{
    if (ModelState.IsValid)
    {
        ModelState.Clear();
    }
        
    return View();
}

I am expecting, that validation error messages show on the alert box.

Answer 1

According to your description, I suggest you could use swal to achieve your requirement.

You could add below scripts and modify the validation summary div like below:

Scripts:

 @section Scripts {

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

    <script>
        function showAlert(title, message, icon, buttonLabel) {
            Swal.fire({
                title: title,
                html: message,
                icon: icon,
                confirmButtonText: buttonLabel
            });
        }
    </script>
    @if (!ViewData.ModelState.IsValid)
    {
        <script>
            // Get validation summary HTML
            var validationSummaryHtml = $('#warnning').html();

            // Display validation summary using SweetAlert
            showAlert("Validation Error", validationSummaryHtml, "error", "OK");
        </script>
    }
}

View page modify the validation summary div:

    <div id="warnning" asp-validation-summary="All" style="display:none"></div>