Meilleure approche pour étendre le javascript discret dans MVC3 pour ajouter un style à un côté client div

Question

Je suis en utilisant html5/Rasoir/MVC3 l'effet de levier le Bootstrap modèle à partir de Twitter. Je veux avoir la validation d'un formulaire qui semble lisse comme ils ont documenté (http://twitter.github.com/bootstrap/#forms). Donc, si nous prenons un coup d'oeil à la façon dont le standard de la chaudière-plaque de MVC3 pour l'enregistrement du compte, le balisage ressemblerait à:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class="form-stacked" })) {
    @Html.ValidationSummary(true, "Snap! Something went wrong")
    <div>
        <fieldset>
            <legend>Account Information</legend>
            <div class="clearfix error">
                @Html.LabelFor(m => m.UserName)
                <div class="input">
                    @Html.TextBoxFor(m => m.UserName)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.Email)
                <div class="input">
                    @Html.TextBoxFor(m => m.Email)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.Email)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.Password)
                <div class="input">
                    @Html.PasswordFor(m => m.Password)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.Password)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.ConfirmPassword)
                <div class="input">
                    @Html.PasswordFor(m => m.ConfirmPassword)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.ConfirmPassword)</span>
                </div>
            </div>
        </fieldset>
        <div class="actions">
            <button class="btn large primary" type="submit">Register</button>
        </div>
    </div>

Ce que je veux faire est d'avoir le div conteneur injecter de l ' "erreur" de la classe comme je l'ai codé en dur dans la première entrée. (Donc, en entrant dans la page, la balise div aurait une classe de "clearfix" mais si le bloc d'entrée échec de la validation, il serait le tag ' "clearfix d'erreur"). Je me dis que je vais avoir à mettre à jour le bloc div inclure un identifiant de la sorte, et peut-être ajouter un nouvel attribut data - pour la ValidationMessage. Je n'ai pas de problème de l'extension de l'assistance ValidationMessageFor. Je ne suis pas 100% sûr de ce que l'approche devrait être pour l'extension de la bibliothèque qui est là. Toutes les suggestions sur la manière d'aborder ce?

TIA.

Mise à JOUR:

Je pense que cette approche est raisonnable:

<div id="UserNameContainer" class="clearfix error">
    @Html.LabelFor(m => m.UserName)
    <div class="input">
        @Html.TextBoxFor(m => m.UserName)
        <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName, null, new { @data_container = "UserNameContainer" })</span>
    </div>
</div>

Par la décoration de mon message de validation avec une base de données-nom du conteneur, j'ai pu, par la suite, div conteneur. Maintenant j'ai juste besoin de comprendre comment intercepter le message de validation.

Answer 1

La méthode $.validator.setDefaults résolu ce problème pour moi avec Bootstrap de Twitter. J'utilise jquery.validate.js et jquery.validate.unobtrusive.js .

Étant donné que la validation discrète sur DOM prêt analyse votre document et met en cache les options de validation discrète pour chaque formulaire qu'il rencontre, il est nécessaire d'appeler la méthode $.validator.setDefaults avant que l'analyse du document ne se produise.

 // setup defaults for $.validator outside domReady handler
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".clearfix").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest(".clearfix").removeClass("error");
    }
});

$(document).ready(function() {
       // do other stuff
});
 

Answer 2

Entré à travers le même problème. Je l'aborde en ajoutant et en extesion à la classe HtmlHelper.

Voici ce que j'ai fait pour le résumé de validation:

    public static class TwitterBootstrapHelperExtensions
    {
        public static MvcHtmlString BootstrapValidationSummary(this HtmlHelper helper,
                               bool excludePropertyErrors,
                               string message)
        {
            if(helper.ViewData.ModelState.Values.All(v => v.Errors.Count == 0)) return new MvcHtmlString(string.Empty);

            string errorsList = "<ul>";
            foreach (var error in helper.ViewData.ModelState.Values.Where(v => v.Errors.Count >0))
            {
                errorsList += string.Format("<li>{0}</li>", error.Errors.First().ErrorMessage);
            }
            errorsList += "</ul>";
            return new MvcHtmlString(string.Format("<div class=\"alert-message error\"><span>{0}</span>{1}</div>",message,errorsList));

        }
    }
 

Et dans le fichier .cshtml je remplace Html.ValidationSummary par ceci:

 @Html.BootstrapValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")
 

N'oubliez pas d'ajouter l'espace de noms de votre classe d'extension dans le fichier vues dossier web.config.

Je posterai ici plus tard si je m'attaque à l'élément d'entrée individuel devant vous. HTH

Answer 3

Plutôt que de réinventer cette roue particulière, vérifiez le plugin validationEngine disponible sur http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ .

Vous pouvez personnaliser les éléments contextuels comme vous le souhaitez, et il est trivial de se connecter à jQuery.validate.js.

Answer 4

Je préfère changer le CSS de bootstrap. Je viens d'ajouter les classes de jQuery validate au bon endroit. erreur de validation de champ et erreur de validation d'entrée

     form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
 

Answer 5

Vous pouvez intégrer la validation MVC3 avec le framework Bootstrap en ajoutant le javascript suivant à votre page (Afficher)

 <script>
$(document).ready(function () {
/* Bootstrap Fix */
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest("div.control-group").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest("div.control-group").removeClass("error");
    }
});
var current_div;
$(".editor-label, .editor-field").each(function () {
    var $this = $(this);
    if ($this.hasClass("editor-label")) {
        current_div = $('<div class="control-group"></div>').insertBefore(this);
    }
    current_div.append(this);
});
$(".editor-label").each(function () {
    $(this).contents().unwrap();
});
$(".editor-field").each(function () {
    $(this).addClass("controls");
    $(this).removeClass("editor-field");
});
$("label").each(function () {
    $(this).addClass("control-label");
});
$("span.field-validation-valid, span.field-validation-error").each(function () {
    $(this).addClass("help-inline");
});
$("form").each(function () {
    $(this).addClass("form-horizontal");
    $(this).find("div.control-group").each(function () {
        if ($(this).find("span.field-validation-error").length > 0) {
            $(this).addClass("error");
        }
    });
});
});
</script>
 

En outre, dans les vues (par exemple "Create.cshtml"), assurez-vous que les champs du formulaire sont formatés comme suit ...

     <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>
 

Avec cette solution, il suffira probablement d'ajouter simplement un javascript sans modifier la vue.