Data Validate - Display Password Requirements Properly

Question

I am struggling to display all the Required Password on data-validate, I assume it keep replacing that string instead of adding more.

Here is my Code

HTML

<form id="ValidToken" class="login100-form validate-form" method="post">
    @if (ViewBag.isValid == true)
    {
        <div class="wrap-input100 validate-input" data-validate="Password is required.">
            <span class="btn-show-pass">
                <i class="zmdi zmdi-eye"></i>
            </span>
            <input class="input100 form-control" asp-for="Password">
            <span class="focus-input100" data-placeholder="Password"></span>
        </div>
        <span id="PasswordMessage" asp-validation-for="Password" class="text-danger d-none"></span>
        <div class="wrap-input100 validate-input" data-validate="Confirm Password is required.">
            <span class="btn-show-pass">
                <i class="zmdi zmdi-eye"></i>
            </span>
            <input class="input100 form-control" asp-for="ConfirmPassword">
            <span class="focus-input100" data-placeholder="Confirm Password"></span>
        </div>
        <span id="ConfirmPasswordMessage" asp-validation-for="ConfirmPassword" class="text-danger d-none"></span>
        <div class="button-center">
            <button type="submit" class="btn btn-primary">Reset</button>
        </div>
        <div class="pt-2">Your Password needs to:</div>
        <p>- Include both upper case characters</p>
        <p>- Include both lower case characters</p>
        <p>- Include at least one number</p>
        <p>- Include at least one none aplhanumeric character</p>
        <p>- Be at least 8 characters long</p>
    }
</form>

Controller for checking error

        [HttpGet]
        [AllowAnonymous]
        public async Task<IActionResult> ResetPassword(string token, string email)
        {
            var user = await userManager.FindByEmailAsync(email);
            if (token == null || email == null)
            {
                ModelState.AddModelError("", "Invalid password reset token");
            }
            if (!await userManager.VerifyUserTokenAsync(user, userManager.Options.Tokens.PasswordResetTokenProvider, "ResetPassword", token))
            {
                ViewBag.Validate = "Sorry! Your Reset Password Link Has Already Expired.";
                ViewBag.isValid = false;

            }
            else
            {
                ViewBag.isValid = true;
            }
            return View();
        }

Controller for Resetting Password (I add it if someone needed this)

[HttpPost]
        [AllowAnonymous]
        public async Task<IActionResult> ResetPassword(ResetPasswordViewModel model)
        {
            if (ModelState.IsValid)
            {
                var user = await userManager.FindByEmailAsync(model.Email);
                if (user != null)
                {
                    var result = await userManager.ResetPasswordAsync(user, model.Token, model.Password);
                    if (result.Succeeded)
                    {
                        var data = new ForgotPasswordConfirmationViewModel
                        {
                            Name = $"{user.FirstName} {user.LastName}",
                            UserName = user.UserName
                        };

                        return View("ResetPasswordConfirmation", data);
                    }

                    foreach (var error in result.Errors)
                    {
                        ViewBag.isValid = true;
                        ModelState.AddModelError("Password", error.Description);
                    }
                }
            }
            return View(model);
        }

JS

    <script>
        $(document).ready(function () {
            if ($('#PasswordMessage').html().length > 0) {
                $('#PasswordMessage').prev().attr('data-validate', $('#PasswordMessage').text());                
                $('#PasswordMessage').prev().addClass('alert-validate');
            }
    
            if ($('#ConfirmPasswordMessage').html().length > 0) {
                $('#ConfirmPasswordMessage').prev().attr('data-validate', $('#ConfirmPasswordMessage').text());
                $('#ConfirmPasswordMessage').prev().addClass('alert-validate');
            }
        });
    </script>

I want to display all the error/requirement notification like this.

Your Password need to:

• Include both Lower and Uppercase Characters
• Include At least one Number
• Include At least one Special Characters
• Be At least 8 Characters Long

but I only get 1 error/requirement notification please check the image below to see what I mean.

-Reult I Made

-Result I Wanted

Answer 1

Try to change

foreach (var error in result.Errors)
                    {
                        ViewBag.isValid = true;
                        ModelState.AddModelError("Password", error.Description);
                    }

to

ViewBag.isValid = true;
var errorMessage="Your Password needs to:";
foreach (var error in result.Errors)
                        {
                            
                            errorMessage+=error.Description;
                        }
ModelState.AddModelError("Password", errorMessage);