jQuery 验证插件不验证我的表单

Posted 2023-05-09

【中文标题】jQuery 验证插件不验证我的表单

【英文标题】：jQuery validation plugin doesn't validate my form

【发布时间】：2018-12-28 02:33:25

【问题描述】：

我的主要目标是检查用户在输入中输入的值是否存在于数据库中。所以我的验证看起来像：

 $('#addForm').validate( 
                rules: 
                    SendingName: 
                        required: true,

                        remote: 
                            url: "@Url.Action(MVC.Product.CheckUniqueSendingName())", 
                            type: "get",
                            data: 
                                subscriptionType: function () 
                                    return @Model.SubscriptionType;
                                ,
                                 sendingName: function () 
                                     return $("#SendingName").val();
                                
                                @*subscriptionType: @Model.SubscriptionType,  
                                sendingName: $("#SendingName").val()*@
                            ,
                            success: function (data) 
                                if (data.Data) 
                                    $('#addForm').submit();
                                 else 
                                    message: 
                                        SendingName: 'Record  is already in use!'
                                    
                                

                            ,
                            // for troubleshooting
                            error: function (XMLHttpRequest, textStatus, errorThrown) 
                                console.log('status: ' + textStatus);
                                console.log('error: ' + errorThrown); 
                            ,

                        
                    
                ,
            );

我的控制器方法：

public virtual JsonResult CheckUniqueSendingName(int subscriptionType, string sendingName)
        
            var isUnique = _productService.CheckUniqueSendingName(ProductId, subscriptionType, sendingName);
            JsonResult result = new JsonResult();
            if (isUnique)
            
                result.Data = false;
            
            else
                result.Data = true;
            return Json(result,JsonRequestBehavior.AllowGet);
        

表单中的我的字段

<div class="form-group row">
                    @html.LabelFor(m => m.SendingName, new  @class = "control-label col-md-3" )
                    <div class="col-md-9">
                        @Html.TextBoxFor(m => m.SendingName, new  @class = "form-control")
                        <div>
                            @Html.ValidationMessageFor(m => m.SendingName, "", new  @class = "text-danger" )
                        </div>
                    </div>
                </div>

所以我只需要验证表单中的一个字段。但是当我提交表单时它不会验证我的表单，没有错误。提交表单时如何归档验证消息错误？谢谢

更新：生成的 html

<div class="card">
    <div class="card-body">
<form action="product/addsendmailinglist" enctype="multipart/form-data" id="addForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="syd_kzSNc5Nl2H5_h4whYNwVgZcYVwxJ2TubrxE47yugkPbJYlj3DpgbUoGzypDLAknc0bNevWaMe65Miu73EAbwwMKEaXcyy5CqrGdsoXz4B7xExxp1CFyJ0YwOugUIry2k0xvhuvVN3Q3ZDi9nvA2" />            <div class="form-horizontal">

                <input data-val="true" data-val-number="The field ProductId must be a number." data-val-required="The ProductId field is required." id="ProductId" name="ProductId" type="hidden" value="1095" />
                <div class="form-group row">
                    <label class="control-label col-md-3" for="EmailFrom">Email From</label>
                    <div class="col-md-9">
                        <input class="form-control" data-val="true" data-val-required="Field is required" id="EmailFrom" name="EmailFrom" type="text" value="[e-mail]" />
                        <span class="field-validation-valid text-danger" data-valmsg-for="EmailFrom" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="control-label col-md-3" for="SendingName">Sending Name</label>
                    <div class="col-md-9">
                        <input class="form-control" data-bind="value: SendingName" data-rule-sendingNameValidation="true" id="SendingName" name="SendingName" type="text" value="Fit-Zakaz" />
                        <div>
                            <span class="field-validation-valid text-danger" data-valmsg-for="SendingName" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>
 <div class="form-group row">
                    <div class="col-md-offset-2 col-md-9">
                        <input type="button" data-bind="click: submit" value="Save" class="btn btn-primary btn-rounded" />
                        <a class="btn btn-default btn-rounded" href="/product/details?subscriptionType=2&amp;Tab=emailsending">Cancel</a>
                    </div>
                </div>
</form>

【问题讨论】：

ASP 包含不显眼的验证插件...您在使用它吗？如果是这样，那么您不能构造自己对 .validate() 方法的调用，因为它只会被忽略，而支持由 Unobtrusive 创建的版本。

@Sparky 不，我不在这里使用不显眼的验证，嗯，有些奇怪，但是我现有的代码有什么解决方案吗？

您必须检查您的 DOM 并在此处发布 RENDERED HTML，以便我们了解 javascript 无法正常工作的原因。客户端代码不关心您的控制器或视图...只关心发送到浏览器的内容。

@Sparky 我更新了我的问题，对不起，也许我对 jQuery 的看法不对，因为有 data-val，data-val-required。我也尝试使用addValidator 方法，但这是不可能的，因为我不能在那里写 ajax 请求，它不起作用。我在 SendingName 字段上也有data-rule-sendingNameValidation，但这是另一条规则，它只是检查字段是否为空

毫无意义。您发布的代码应该可以工作。各种常见错误会产生 JavaScript 控制台错误。你检查你的 JavaScript 控制台是否有错误？

【参考方案1】：

好的，我试试

 $(function () 
            jQuery.validator.addMethod("data-rule-checkunique", function (value) 

                var check_result = false;
                jQuery.ajax(
                    type: "GET",
                    url: "@Url.Action(MVC.Product.CheckUniqueSendingName())?subscriptionType=" [e-mail] + "&sendingName=" + $("#SendingName").val(),
                    async: false,
                    data: JSON.stringify(
                        subscriptionType: @Model.SubscriptionType,
                        sendingName: $("#SendingName").val()
                    ),
                    dataType: "json",
                    success: function (return_data) 
                        if (return_data.Data === false) 
                            check_result = false;
                         else if (return_data.Data) 
                            check_result = true;
                        
                    
                );
                return check_result;
            , "error message");

重要的是异步：假。我不知道这是否正确，但显然它有效。如果我说的不对，我会听你的 cmets 的

【讨论】：

你为什么要重新发明***。已经有一个[Remote] 属性。

@StephenMuecke 谢谢我不知道这个属性，我需要了解它