23

この投稿に記載されているコードを実装しようとしています。言い換えれば、利用規約のチェックボックスに目立たない検証を実装しようとしています。ユーザーがチェックボックスを選択していない場合、入力は無効としてマークされます。

これはサーバー側の Validator コードです。追加しました:

/// <summary>
/// Validation attribute that demands that a boolean value must be true.
/// </summary>
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class MustBeTrueAttribute : ValidationAttribute
{
    public override bool IsValid(object value)
    {
        return value != null && value is bool && (bool)value;
    }
}

これがモデルです

[MustBeTrue(ErrorMessage = "You must accept the terms and conditions")]
[DisplayName("Accept terms and conditions")]
public bool AcceptsTerms { get; set; }

これは私の見解です：

@Html.EditorFor(x => x.AcceptTermsAndConditions)
@Html.LabelFor(x => x.AcceptTermsAndConditions)
@Html.ValidationMessageFor(x => x.AcceptTermsAndConditions)

これは、バリデーターのクライアント側をアタッチするために使用した jQuery です。

$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");

ただし、クライアント側のスクリプトは機能していないようです。送信ボタンを押すたびに、他のフィールドの検証は正常に開始されますが、利用規約の検証は開始されていないようです。これは、送信ボタンをクリックした後のコードが Firebug でどのように見えるかです。

<input type="checkbox" value="true" name="AcceptTermsAndConditions" id="AcceptTermsAndConditions" data-val-required="The I confirm that I am authorised to join this website and I accept the terms and conditions field is required." data-val="true" class="check-box">
<input type="hidden" value="false" name="AcceptTermsAndConditions">
<label for="AcceptTermsAndConditions">I confirm that I am authorised to join this website and I accept the terms and conditions</label>
<span data-valmsg-replace="true" data-valmsg-for="AcceptTermsAndConditions" class="field-validation-valid"></span>

何か案は？私は一歩を踏み外したことがありますか？これは私をトイレに駆り立てています！

よろしくお願いします S

4

6 に答える 6

37

クライアント側で登録しているアダプター名をこの属性に関連付けるために、カスタム属性にIClientValidatableを実装する必要があります。mustbetrue

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return value != null && value is bool && (bool)value;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "mustbetrue"
        };
    }
}

アップデート：

完全な作業例。

モデル：

public class MyViewModel
{
    [MustBeTrue(ErrorMessage = "You must accept the terms and conditions")]
    [DisplayName("Accept terms and conditions")]
    public bool AcceptsTerms { get; set; }
}

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel();
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

意見：

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.unobtrusive.adapters.addBool("mustbetrue", "required");
</script>

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(x => x.AcceptsTerms)
    @Html.LabelFor(x => x.AcceptsTerms)
    @Html.ValidationMessageFor(x => x.AcceptsTerms)
    <input type="submit" value="OK" />
}
于 2011-08-03T10:15:10.817 に答える
26

スニッファー、

Darin のソリューションを実装するだけでなく、ファイルを変更する必要もありますjquery.validate.unobtrusive.js。このファイルでは、次のように「mustbetrue」検証メソッドを追加する必要があります。

$jQval.addMethod("mustbetrue", function (value, element, param) {
    // check if dependency is met
    if (!this.depend(param, element))
        return "dependency-mismatch";
    return element.checked;
});

次に (最初にこれを追加するのを忘れていました)、以下も に追加する必要がありますjquery.validate.unobtrusive.js。

adapters.add("mustbetrue", function (options) {
    setValidationValues(options, "mustbetrue", true);
});

カウンセラーベン

于 2011-08-03T18:38:39.610 に答える
5

なぜこれがうまくいかなかったのかはわかりませんが、あなたのコードを使用して少し違うことをすることにしました。

JavaScript の読み込み時に以下を追加します。また、フォームを送信する場合。

$(function () {
        $(".checkboxonblurenabled").change(function () {
            $('form').validate().element(this);
        });
});

同様に、CSS クラスをチェックボックスに追加する必要もあります。

@Html.CheckBoxFor(model => model.AgreeToPrivacyPolicy, new { @class = "checkboxonblurenabled"})

そのため、モデルを接続し、out クラスを配置してサーバー側の検証 (上記から再利用しています) を処理する必要がありますが、目立たないようにする必要があります。

上記の例のように IClientValidate を拡張する顧客属性は次のとおりです...

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return value != null && value is bool && (bool)value;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "mustbetrue"
        };
    }
}

モデルでは、オブジェクトのプロパティは目的の属性表記を設定します

 [MustBeTrue(ErrorMessage = "Confirm you have read and agree to our privacy policy")]
    [Display(Name = "Privacy policy")]
    public bool AgreeToPrivacyPolicy { get; set; }

よし、JavaScript を挿入する準備ができました。

(function ($) {
    /*
    START CHECK MUST BE TRUE - UNOBTRUSIVE JAVASCRIPT
    START CHECK MUST BE TRUE - UNOBTRUSIVE JAVASCRIPT
    START CHECK MUST BE TRUE - UNOBTRUSIVE JAVASCRIPT
    */
    jQuery.validator.unobtrusive.adapters.add("mustbetrue", ['maxint'], function (options) {
        options.rules["mustbetrue"] = options.params;
        options.messages["mustbetrue"] = options.message;
    });

    jQuery.validator.addMethod("mustbetrue", function (value, element, params) {

        if ($(element).is(':checked')) {
            return true;
        }
        else {
            return false;
        }
    });
    /*
    START CHECK MAX INT - UNOBTRUSIVE JAVASCRIPT
    START CHECK MAX INT - UNOBTRUSIVE JAVASCRIPT
    START CHECK MAX INT - UNOBTRUSIVE JAVASCRIPT
    */



} (jQuery));

これが機能する理由は...まあ。上記の提案された回答を実行しようとした後に HTML マークアップを見た後、私の値はすべて true に設定されていましたが、チェックボックスのチェックは false でした。そこで、IsChecked を使用して jQuery に解決させることにしました。

于 2012-04-24T15:33:21.090 に答える
2

これらの解決策のいずれも機能していない場合:

.Net Framework 4 と最新の jquery 検証スクリプト ファイルを使用して Razor MVC 4 を使用しています。

クライアント側とサーバー側でカスタム属性の検証を実装した後も、まだ機能しません。とにかく私のフォームは投稿されています。

ここにキャッチがあります: JQuery 検証スクリプトには、非表示のタグを無視するデフォルト設定があり、非表示はhttp://api.jquery.com/hidden-selector/であり、通常は問題になりませんが、 @Html.CheckBoxFor スタイル私が使用しているのは、表示をなしに変更するCSS3スタイルでカスタマイズされ、チェックボックスのカスタム画像が表示されるため、チェックボックスで検証ルールが実行されることはありません。

私の回避策は、カスタム クライアント検証ルールの宣言の前に次の行を追加することでした。

$.validator.defaults.ignore = "";

現在のページのすべての検証の無視設定をオーバーライドします。隠しフィールドでも検証を実行できるようになったことに注意してください (副作用)。

于 2013-12-17T18:03:52.390 に答える
1 
<script>
    $(function () {
        $('#btnconfirm').click(function () {
            if ($("#chk").attr('checked') !== undefined ){
                return true;
            }
            else {

                alert("Please Select Checkbox ");
                return false;
            }
        });

    });
</script>
<div style="float: left">
                    <input type="checkbox" name="chk" id="chk"  />
                    I read and accept the terms and Conditions of registration
                </div>
  <input type="submit" value="Confirm"  id="btnconfirm" />
于 2014-02-26T11:19:44.720 に答える