La validation côté Client dans asp.net mvc

Je suis assez nouveau à asp.net MVC. J'ai un problème de fixation de la validation côté client des erreurs de validation, la liste récapitulative en MVC. Sur le côté client de soumettre cliquez sur la fonction, de la validation,-résumé-les erreurs div est toujours vide, même si il y a des erreurs de validation dans la forme.

Laissez-moi vous expliquer en détail avec de l'extrait de code.L'extrait de code que j'ai fourni est mon exemple d'application.

J'ai activé infoclient la validation de ma demande d'inscription par le web.config et inclus par défaut de jquery validations bibliothèque dans ma mise en page.

@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")

MVC Vue

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
        </ol>
        <input type="submit" value="Register" id="btnSubmit" />
    </fieldset>
}

Vue Modèle est ci-dessous

public class RegisterModel
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }

Fichier de Script que j'ai utilisé est en dessous.

<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function (e) {
            e.preventDefault();            
            var errorSummary = $('.validation-summary-errors');
            if (errorSummary.length == 0) {
                $('#listError').remove();
                $('<div class="validation-summary-errors"></div>').insertAfter($('.validation-summary-valid'));
                $(".validation-summary-errors").append("<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>");
            }
            else if (errorSummary.length == 1) {
                $('#listError').remove();
                $(".validation-summary-errors").append("<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>");
            }
            return false;
        });

    });

</script>

Quand je n'ai pas jquery soumettre cliquez sur la fonction tout fonctionne bien comme prévu. Modèle valiadtions sont tiré dans le côté client, cliquez sur soumettre.

En plus de modèle de validations j'ai aussi quelques jquery côté client validations qui doivent être ajoutés à la liste existante de résumé de validation. Mais la "validation-résumé-erreurs" div est toujours vide à soumettre cliquez sur la fonction. Donc, chaque fois que le $('.validation-résumé-erreurs").la longueur est de 0.

Quelqu'un peut-il m'aider à comprendre où vais-je tort?

Mise à jour du code

$(function () {
    $("#btnSubmit").click(function (e) {

        var IsValid = validateForms();
        if (!IsValid) {
            e.preventDefault();
        }
    });
});

function validateForms() {

    var blnValid = false;
    var valMsg = ValidateDynamicControls();

    if ($('#MemberForm').valid()) {
        $(".validation-summary-errors").empty();
        blnValid = true;
    }
    if (valMsg != '') {

        blnValid = false;
        var errorSummary = $('.validation-summary-errors')
        if (errorSummary.length == 1 && errorSummary[0].innerHTML != '' &&    errorSummary[0].innerHTML != undefined) {
            $(".validation-summary-errors ul").append(valMsg);
        } else {

            $('#listError').remove();
            $('<div class="validation-summary-errors"></div>').insertAfter($('.validation-summary-valid'));
            $(".validation-summary-errors").append("<ul id='listError'>" + valMsg + "</ul>");
        }
    }

    return blnValid;
}

function ValidateDynamicControls() {
    var strAliasValMsg = 'The string is not valid.';

    return strAliasValMsg;
}