验证剃刀形式：显示和隐藏错误消息

Question

我的剃须刀视图中有这个表格

@model  Models.ClientModel


<style type="text/css">
    #accountForm {
        margin-top: 15px;
    }
    #tab_1 , #tab_2 ,  #tab_3,  #tab_4
    {
        min-height: 350px;
        height : 350px;
    }
</style>


    <ul class="nav nav-tabs">
        <li class="active" id="tabulation_1"><a href="#tab_1" data-toggle="tab">Informations générales</a></li>
        <li id="tabulation_2"><a href="#tab_2" data-toggle="tab">Adresse</a></li>
        <li id="tabulation_3"><a href="#tab_3" data-toggle="tab">Caisse d'assurance maladie</a></li>
        <li id="tabulation_4"><a href="#tab_4" data-toggle="tab">Mutuelle</a></li>
    </ul>


<form id="addclient" method="post" class="form-horizontal">
    <div class="tab-content">

        <div class="tab-pane active" id="tab_1">

            @Html.HiddenFor(p => p.id_client)
            @Html.HiddenFor(p => p.id_coor)



            <div class="form-group">
                @Html.LabelFor(m => m.nom_client, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.nom_client, new { @class = "form-control", id = "nom_client" })
                    @Html.ValidationMessageFor(m => m.nom_client, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.prenom_client, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.prenom_client, new { @class = "form-control", id = "prenom_client" })
                    @Html.ValidationMessageFor(m => m.prenom_client, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.tel_client, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.tel_client, new { @class = "form-control", id = "tel_client" })
                    @Html.ValidationMessageFor(m => m.tel_client, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.fixe_client, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.fixe_client, new { @class = "form-control", id = "fixe_client" })
                    @Html.ValidationMessageFor(m => m.fixe_client, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.id_motif, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.DropDownListFor(m => m.id_motif, new SelectList(Model.MotifsItems, "id", "libelle"), new { @class = "form-control" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.securite_sociale, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.securite_sociale, new { @class = "form-control", id = "securite_sociale" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.date_naissance_client, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.date_naissance_client, new { @class = "form-control", id = "date_naissance_client", @readonly = "true" })
                </div>
            </div>

        </div>

        <div class="tab-pane" id="tab_2">

            @Html.Partial("_GeoApi", new Models.GeoLocationModel())
        </div>

        <div class="tab-pane" id="tab_3">

            <div class="form-group">
                @Html.LabelFor(m => m.id_caisse, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.DropDownListFor(m => m.id_caisse, new SelectList(Model.CaisseItems, "id", "nom"), new { @class = "form-control" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.num_caisse, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.num_caisse, new { @class = "form-control", id = "num_caisse" })
                </div>
            </div>



        </div>

        <div class="tab-pane" id="tab_4">

            <div class="form-group">
                @Html.LabelFor(m => m.id_mutuelle, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.DropDownListFor(m => m.id_mutuelle, new SelectList(Model.MutuellesItems, "id", "nom"), new { @class = "form-control" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.mutuelle_validation_date, new { @class = "col-xs-3 control-label" })
                <div class="col-xs-5">
                    @Html.TextBoxFor(m => m.mutuelle_validation_date, new { @class = "form-control", id = "mutuellevalidation_date", @readonly = "true" })
                </div>
            </div>



        </div>


    </div>

    <div class="form-group" style="margin-top: 15px;">

        <div class="col-xs-5 col-xs-offset-3">
            <button id="btnStepTwo" type="button" class="btn btn-primary">Enregistrer</button>
            <button type="button" class="btn bg-maroon btn-flat margin" id="Annuler">Annuler</button>
        </div>
    </div>
</form>

包含四个标签的表单。我的问题是验证消息，它出现了：即我添加了这个javascript代码

function ClickHandler(e) {

    switch (e.target.id) {
 case "btnStepTwo":

            if ($("#addclient")[0].checkValidity() == false) {
                return false;
            }
            else { SaveOrUpdateClient(); getlstClients(); selectView("summary"); }

             break;
}}

我想更改此js代码以在表单无效时显示所有消息错误，并在有效时隐藏所有错误（在执行SaveOrUpdateClient函数之前）

那我该怎么做呢？什么是最简单的方法？