web-dev-qa-db-ja.com

チェックボックスのMVC控えめな検証が機能しない

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

これはサーバー側のバリデーターコードです。追加しました。

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

asp.net-mvc-3razorunobtrusive-javascriptunobtrusive-validation
23
Sniffer

スニファー、

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

カウンセルロルベン

26
counsellorben

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

[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" />
}
37
Darin Dimitrov

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

JavaScriptのロード時に、以下を追加します。これにより、チェックボックスを選択してオフにした場合に、チェックボックスが目立たない検証を実行します。また、フォームを送信した場合。

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

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

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

したがって、モデルをフックしてサーバー側の検証（上から再利用します）を処理するためにクラスを配置する必要がありますが、控えめさを少し変更します。

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

[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で解決することにしました

5
Adam

これらのソリューションのいずれも機能していない場合：

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

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

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

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

$.validator.defaults.ignore = "";

現在のページのすべての検証の無視設定をオーバーライドします。非表示フィールドでも検証を実行できるようになりました（副作用）。

2
Jesus Mogollon
<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" />
1
kavitha Reddy
/// <summary> 
///  Summary : -CheckBox for or input type check required validation is not working the root cause and solution as follows
///
///  Problem :
///  The key to this problem lies in interpretation of jQuery validation 'required' rule. I digged a little and find a specific code inside a jquery.validate.unobtrusive.js file:
///  adapters.add("required", function (options) {
///  if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
///    setValidationValues(options, "required", true);
///    }
///   });
///   
///  Fix: (Jquery script fix at page level added in to check box required area)
///  jQuery.validator.unobtrusive.adapters.add("brequired", function (options) {
///   if (options.element.tagName.toUpperCase() == "INPUT" && options.element.type.toUpperCase() == "CHECKBOX") {
///              options.rules["required"] = true;
///   if (options.message) {
///                   options.messages["required"] = options.message;
///                       }
///  Fix : (C# Code for MVC validation)
///  You can see it inherits from common RequiredAttribute. Moreover it implements IClientValidateable. This is to make assure that rule will be propagated to client side (jQuery validation) as well.
///  
///  Annotation example :
///   [BooleanRequired]
///   public bool iAgree { get; set' }
///    

/// </summary>


public class BooleanRequired : RequiredAttribute, IClientValidatable
{

    public BooleanRequired()
    {
    }

    public override bool IsValid(object value)
    {
        return value != null && (bool)value == true;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        return new ModelClientValidationRule[] { new ModelClientValidationRule() { ValidationType = "brequired", ErrorMessage = this.ErrorMessage } };
    }
}
0
dhandapani harikrishnan