JQuery验证自定义方法在jquery.load()之后无法正常工作

时间:2015-07-13 12:50:16

标签: c# jquery asp.net-mvc asp.net-mvc-4 partial

使用jquery.load时,我尝试获取JQueryValidate自定义验证属性似乎不起作用。这是我的代码:

CreateViewModel.cs

public class CreateViewModel
{
    [DisplayName("Artwork")]
    public int ArtworkId { get; set; }

    [AtLeastOne("selectiongroup")]
    public bool IsPromo { get; set; }
    [AtLeastOne("selectiongroup")]
    public bool IsUpc { get; set; }
    [AtLeastOne("selectiongroup")]
    public bool IsCoupon { get; set; }

    public SelectList ArtworkSelectList { get; set; }
}

AtLeastOneAttribute.cs

[AttributeUsage(AttributeTargets.Property, AllowMultiple = true)]
public class AtLeastOneAttribute : ValidationAttribute, IClientValidatable
{
    public string GroupName { get; private set; }

    public AtLeastOneAttribute(string groupName)
    {
        GroupName = groupName;
    }
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = "At least one of Coupon or Upc or Promo is required.",
            ValidationType = "atleastone",
            ValidationParameters =
            {
                new KeyValuePair<string, object>("groupname", GroupName),
            }
        };
    }
}

Page.cshtml

<form method="POST" id="signCreationForm">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                @Html.LabelFor(model => model.ArtworkId)
                @Html.DropDownListFor(model => model.ArtworkId, Model.ArtworkSelectList, "Select an Artwork")
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6"></div>
            <div>@Html.ValidationMessageFor(model => model.ArtworkId)</div>
        </div>
        <div class="row">
            <div class="col-lg-10">
                <label>Associated With:</label>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                @Html.LabelFor(model => model.IsUpc, "UPC")
                @Html.CheckBoxFor(model => model.IsUpc)
                @Html.ValidationMessageFor(model => model.IsUpc)
            </div>
            <div class="col-lg-4">
                @Html.LabelFor(model => model.IsCoupon, "Coupon")
                @Html.CheckBoxFor(model => model.IsCoupon)
                @Html.ValidationMessageFor(model => model.IsCoupon)
            </div>
            <div class="col-lg-4">
                @Html.LabelFor(model => model.IsPromo, "Promotion")
                @Html.CheckBoxFor(model => model.IsPromo)
                @Html.ValidationMessageFor(model => model.IsPromo)
            </div>
        </div>
    </div>
</form>
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $.validator.addMethod("atleastone", function (value, element, params) {
        return $("[data-val-atleastone-groupname="+params+"]:checked").length > 0;
    });

    $.validator.unobtrusive.adapters.add("atleastone", ["groupname"], function (options) {
        options.rules["atleastone"] = options.params.groupname;
        options.messages["atleastone"] = options.message;
    });
</script>

CallingPage.cshtml(正在调用它的javascript)

        $("#create-ad[data-link]").on("click", function() {
            var link = $(this).data("link");
            $createDialog.load(link, function() {
                $createDialog.dialog("open");
                $.validator.unobtrusive.parse($("#signCreationForm"));
            });
        });

现在,此代码在单独的项目中工作。在此项目中,部分视图通过jquery.load()事件加载,由于某种原因,这会导致自定义方法永远不会执行。我知道这一点,因为对于使用atleastone属性修饰的每个属性,警报通常会触发一次。

使用带有自定义jqueryvalidate验证的jquery加载时,是否需要在Page.cshtml上执行任何特殊操作?

2 个答案:

答案 0 :(得分:1)

请将您的自定义方法放入 jquery文档准备 ;;;;;;

对于I.E。

<script type="text/javascript">
$(document).ready(function(){
    $.validator.addMethod("atleastone", function (value, element, params) {
        alert("halp");

        return $(".grouped:checked").length > 0;
    });

    $.validator.unobtrusive.adapters.add("atleastone", ["groupname"], function (options) {
        alert("halp");
        options.rules["atleastone"] = "#" + options.params.groupname;
        options.messages["atleastone"] = options.message;
    });
});
</script>

答案 1 :(得分:0)

此方案回复https://stackoverflow.com/a/16105954/82333的建议副本出现了问题的前半部分,即add $ .validator.unobtrusive.adapters.add无效。但是,之后其余的代码也没有运行。

@Bhavin Solanki评论将验证文件包含在调用页面修复了另一半,这就是提交代码时没有运行。