it-swarm.com.de

MVC3: Checkbox per jQuery validieren?

Ich möchte, dass mein Kontrollkästchen "Zustimmen zu Bedingungen" mithilfe von jQuery Validate in einem MVC3-Projekt obligatorisch ist. Ich erhalte derzeit eine Server/Client-DRY/SPOT-Validierung über "MS Data Annotation-Attribute" + "MS MVC3 unauffällige jQuery-Validierung".

Hier ist ein eigenständiger Test (einfaches HTML, das von MVC3 generiert wird). Warum funktioniert es bitte nicht? Bei der Ausführung wird durch die Überprüfung sichergestellt, dass das Feld "Kontaktname" ausgefüllt ist, der Status des Kontrollkästchens ist jedoch unerheblich.

<!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>





Der Rest dieses Beitrags ist nur meine Forschungsnotizen.

Das Festlegen des Datenanmerkungsattributs [erforderlich] hilft nicht:
http://forums.89.biz/forums/MVC+3+Unauffällige+Validierung+wirkt+nicht+mit+Aktivierungskästchen+ (jquery + validation) + und + dem + Fix + dafür .

Das ist gut. Was "erforderlich" für ein Kontrollkästchen bedeutet, ist offensichtlich ein heiliger Krieg, in den ich nicht eintauchen möchte. MS glaubte, sie wüssten es besser als das JQuery-Team. Es vor Ort zu erzwingen, sollte eine einfache Sache sein:
$("form").validate({ rules: { cbAgreeToTerms: "required" } });

...richtig? nein wegen:
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

WAS? Das ist ziemlich frech! (IMHO natürlich.)

Nun habe ich diese Lösung ausprobiert:
http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
und es hat bei mir nicht funktioniert. Die herabhängenden Kommentare dieses Autors und die etwas kultige Verwendung des umgekehrten CHECKBOX-Tests von früher in seinem/ihrem Artikel lassen mich fragen, ob es tatsächlich für ihn/sie funktioniert. Um welches Voodoo handelte es sich dann?

Beachten Sie, dass das letzte JS-Snippet dem Cleaner entspricht:
$.validator.unobtrusive.adapters.addBool("brequired", "required"); Das hat der letzte Beitrag in:
http://forums.asp.net/p/1648319/4281140.aspx#428114
Beachten Sie jedoch, dass der Autor angibt, dass er das Problem noch nicht behoben hat. Es hat bei mir nicht funktioniert und zwischen den Zeilen zu lesen, ich denke, er meint, es hat bei ihm nicht funktioniert?

Die Aufrufe von unobtrusive.js parsen bereits auf docready, also habe ich versucht, das aufzurufen, aber es hat mir nicht geholfen.
$.validator.unobtrusive.parse(document); Ich habe auch ein paar ähnliche Artikel gefunden und in keinem ist davon die Rede, dass eine Initialisierung jeglicher Art erforderlich ist. Vielleicht bearbeiten sie alle lokal die original/public unobtrusive.js? Ich würde es lieber nicht tun, wenn ich etwas dagegen tun könnte. Sind die Adapter nicht dafür gedacht?

Ich habe Stapel-Überlauf-Artikel gefunden, ähnlich wie komplexere Beispiele:
ASP .Net MVC 3 unauffällige benutzerdefinierte Clientüberprüfung
Client-seitige Validierung für benutzerdefiniertes Attribut durchführen
http://xhalent.wordpress.com/2011/01/27/custom-unobstrusive-jquery-validation-in-asp-net-mvc-3/
Aber ich sehe dort nichts, was sich von dem unterscheidet, was ich bereits ausprobiert habe.

Funktioniert das wirklich für Menschen? Warum kann ich es nicht für mich arbeiten lassen?

44
shannon

Ändern Sie einfach Ihr Javascript in dieses:

(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));

Sie müssen jedoch keinen eigenen Adapter schreiben und können einfach Folgendes verwenden:

(function ($) {
    $.validator.unobtrusive.adapters.addBool("mandatory", "required");
} (jQuery));
32
Paul Hiles

Ich habe hier den korrekt funktionierenden Quellcode zusammengefasst, der sich aus der Anwendung der akzeptierten Antwort ergibt. Ich hoffe, Sie finden es nützlich.

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;
    }
}
60
shannon
<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>
0
vikram