44 votes

shannon avatar

MVC3: faire case requis via jQuery valider?

Demandé el 8 de Février, 2011
Quand la question a-t-elle été
18926 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je veux que mon "Accepter les Conditions" case à cocher pour être obligatoires à l'aide de jQuery valider, dans un MVC3 projet. Je suis actuellement serveur/client SEC/SPOT de validation à partir de "données MS attributs d'annotation" + "MS MVC3 discrète jQuery de validation".

Voici un test stand-alone (plaine du code HTML généré par MVC3). Pourquoi ne pas travailler, s'il vous plaît? Lorsque vous exécutez, la validation assure le "Contact" Nom de champ est rempli, mais ne se soucie pas de l'état de la case à cocher.

<!DOCTYPE html>

<html>
<head>
    <title>RequiredCheckbox</title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            // http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
            $.validator.unobtrusive.adapters.add("mandatory", function (options) {
                    options.rules["required"] = true;
                    if (options.message) {
                        options.messages["required"] = options.message;
                    }
                }
            });
            $.validator.unobtrusive.parse(document);
        });
    </script>

</head>

<body>
    <div>
        <form>
            <input data-val="true" data-val-mandatory="The field Terms Are Accepted is invalid." id="isTermsAccepted" name="isTermsAccepted" type="checkbox" value="true" />
            <input name="isTermsAccepted" type="hidden" value="false" />
            <span class="field-validation-valid" data-valmsg-for="isTermsAccepted" data-valmsg-replace="true"></span>

            <input data-val="true" data-val-required="The Contact Name field is required." id="contactName" name="contactName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="contactName" data-valmsg-replace="true"></span>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>





Le reste de ce post est juste mes notes de recherche.

Réglage de l'annotation de données de l'attribut [obligatoire] n'aide pas:
http://forums.89.biz/forums/MVC+3+Unobtrusive+validation+does+not+work+with+checkboxes+(jquery+validation)+and+the+fix+for+it.

C'est très bien. Ce "obligatoire" pour une case à cocher est évidemment une guerre sainte, je ne veux pas wade, où MME de la pensée qu'ils connaissaient mieux que les jquery équipe. Le fait de contraindre localement devrait être une simple question de:
$("form").validate({ rules: { cbAgreeToTerms: "required" } });

...droit? non, parce que:
http://blog.waynebrantley.com/2011/01/mvc3-breaks-any-manual-use-of-jquery.html
http://pinoytech.org/question/4824071/microsofts-jquery-validate-unobtrusive-makes-other-validators-skip-validation

QUOI? C'est assez puant cheezy! (À mon humble avis, bien sûr.)

Maintenant, j'ai essayé cette solution:
http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
et il n'a pas de travail pour moi. De cet auteur, balançant des commentaires et un peu de fret-culte de l'utilisation de l'inversion de la CASE test de plus tôt dans son article, je me demande si cela fonctionne réellement pour lui, alors que d'autres le vaudou a été impliqué?

Remarque je pense que le dernier extrait de JS est l'équivalent de l'aspirateur:
$.validator.unobtrusive.adapters.addBool("brequired", "required"); Qui a été suggéré par le dernier post:
http://forums.asp.net/p/1648319/4281140.aspx#4281140
Mais de l'avis que les commentaires de l'auteur qu'il n'avait pas réglé encore. Il n'a pas de travail pour moi, et lire entre les lignes, je pense qu'il veut dire, il n'a pas de travail pour lui?

L'unobtrusive.js les appels d'analyser sur docready, donc j'ai essayé d'appeler, mais il ne m'a pas aidé.
$.validator.unobtrusive.parse(document); J'ai également trouvé quelques articles similaires, et aucun ne de parler au sujet de l'obligation d'initialisation de toute sorte. Peut-être qu'ils sont tous localement édition de l'original/public unobtrusive.js? Je préfère pas si je peux l'aider, n'est-ce pas ce que les cartes sont pour?

J'ai trouvé pile de dépassement d'articles, beaucoup de le même, ainsi que des exemples plus complexes:
ASP .Net MVC 3 discrète client personnalisé de validation.
Effectuer la validation côté client pour l'attribut personnalisé
http://xhalent.wordpress.com/2011/01/27/custom-unobstrusive-jquery-validation-in-asp-net-mvc-3/
Mais je ne vois rien là qui est différent de ce que j'ai déjà essayé.

Est-ce vraiment pour les gens? Pourquoi je ne peux pas le faire fonctionner pour moi?

Demandé el 8 de Février, 2011 par shannon

Réponses

Trop de publicités?

60voto

shannon avatar
shannon Points 1979

J'ai résumé ici l'correctement-travail code source, qui a résulté de l'application de la accepté de répondre. J'espère que vous trouverez utile.

RequiredCheckbox.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<RegistrationViewModel>" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>RequiredCheckbox</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.js" type="text/javascript"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $.validator.unobtrusive.adapters.addBool("mandatory", "required");
    </script>
</head>
<body>
    <div>
        <% 
        // These directives can occur in web.config instead
        Html.EnableUnobtrusiveJavaScript();
        Html.EnableClientValidation();
        using (Html.BeginForm())
        { %>
            <%: Html.CheckBoxFor(model => model.IsTermsAccepted)%>
            <%: Html.ValidationMessageFor(model => model.IsTermsAccepted)%>

            <%: Html.TextBoxFor(model => model.ContactName)%>
            <%: Html.ValidationMessageFor(model => model.ContactName)%>
            <button type="submit">Submit</button>
        <% } %>
    </div>
</body>
</html>

RegistrationViewModel.cs

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class RegistrationViewModel {
    [Mandatory (ErrorMessage="You must agree to the Terms to register.")]
    [DisplayName("Terms Accepted")]
    public bool isTermsAccepted { get; set; }

    [Required]
    [DisplayName("Contact Name")]
    public string contactName { get; set; }
}

MandatoryAttribute.cs

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

public class MandatoryAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return (!(value is bool) || (bool)value);
    }
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        ModelClientValidationRule rule = new ModelClientValidationRule();
        rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
        rule.ValidationType = "mandatory";
        yield return rule;
    }
}
Répondu el 22 de Mars, 2011 par shannon (1979 Points )

32voto

Paul Hiles avatar
Paul Hiles Points 3887

Il suffit de changer votre code javascript à ceci:

    (function ($) {
        // http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
        $.validator.unobtrusive.adapters.add("mandatory", function (options) {
                options.rules["required"] = true;
                if (options.message) {
                    options.messages["required"] = options.message;
                }                
        });            
    } (jQuery));

Vous n'avez pas réellement besoin d'écrire votre propre carte si et pouvez simplement utiliser:

(function ($) {
  $.validator.unobtrusive.adapters.addBool("mandatory", "required");
} (jQuery));
Répondu el 8 de Février, 2011 par Paul Hiles (3887 Points )

0voto

vikram avatar
vikram Points 1 
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <h2>
        Save New Contact</h2>
    <%using (Html.BeginForm("SaveContact", "Contact", FormMethod.Post, new { id = "UserImportTypeForm", @autocomplete = "off" })) %>
    <%{ %>
    <table style="height: 100px;">
        <tr>
            <td>
                Import Type :
            </td>

        </tr>
        <tr>
            <td>
                Is Verified
            </td>
            <td>
                <%-- <%=Html.TextBox("UserContactModel.IsVerified", new SelectList(Model.IsVerified, "IsVerified"), new { })%>>--%>
                <%-- <input type="text" name="txtIsVerified" id="txtIsVerified" />--%>
                <%-- <%= Html.TextBox("txtIsVerified")%>--%>
                <%=Html.CheckBox("SelectedUserContact.IsVerified", Convert.ToBoolean(Model.SelectedUserContact.IsVerified) )%>
                <%=Html.ValidationSummary("txtIsVerified", "*")%>
            </td>
        </tr>
        <tr>
            <td>
                First Name
            </td>
            <td>
                <%--<input type="text" name="txtFirstName" id="txtFirstName" />--%>
                <%=Html.TextBox ("SelectedUserContact.FirstName", Model.SelectedUserContact.FirstName )%>
                <%-- <%=Html.ValidationSummary("FirstName", "*")%>--%>
            </td>
        </tr>
        <tr>
            <td>
                Last Name
            </td>
            <td>
                <%--<input type="text" name="txtLastName" id="txtLastName" />--%>
                <%=Html.TextBox("SelectedUserContact.LastName", Model.SelectedUserContact.LastName)%>
                <%=Html.ValidationSummary("LastName", "*")%>
            </td>
        </tr>
        <tr>
            <td>
                Contact ID
            </td>
            <td>
                <%=Html.TextBox("SelectedUserContact.ContactID",Model.SelectedUserContact.ContactID) %>
                <%=Html.ValidationSummary("ContactID","*") %>
            </td>
        </tr>
        <tr>
            <td align="right">
                <input type="submit" value="Save" name="btnSave" id="btnSave" />
            </td>
            <td>
                <input type="button" value="Cancel" name="btnCancel" id="btnCancel" />
            </td>
        </tr>
    </table>
    <%} %>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        $("#UserImportTypeForm").validate({
            rules:
    {

        "SelectedUserContact.FirstName": { required: true },
        "SelectedUserContact.LastName": { required: true },
        "SelectedUserContact.ContactID": {required:true}
    },
            messages:
    {

        "SelectedUserContact.FirstName": { required: "*" },
        "SelectedUserContact.LastName": { required: "*" },
        "SelectedUserContact.ContactID": { required: "*" },

    }
        });



    </script>
</asp:Content>
Répondu el 18 de Février, 2011 par vikram (1 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X