文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Jquery验证器不工作

问Jquery验证器不工作
EN

Stack Overflow用户
提问于 2016-04-12 08:04:16
回答 2查看 109关注 0票数 2

最近，我发现了这页面，其中显示了一个用于澳大利亚业务编号的jquery验证器函数。在我的Cshtml页面中，我有以下表单元素。

代码语言：javascript
复制
<div class="col-md-4">
    <div class="form-group">
        <label asp-for="ABN" class="col-md-4 col-lg-4 control-label"></label>
        <div class="col-md-8 col-lg-8">
            <input asp-for="ABN" class="form-control" />
            <span asp-validation-for="ABN" class="text-danger" />
        </div>
    </div>
</div>

我已经将jquery代码放到页面中，并使用F12调试器，我注意到它确实执行了一步，但是虽然它是一个返回false的数字，但对于一个错误，我没有看到任何事情发生。页面只是用来更新DB。

代码语言：javascript
复制
function abnValidate (value, element) {
    if (value.length != 11 || isNaN(parseInt(value)))
    return false;
    var weighting = [10,1,3,5,7,9,11,13,15,17,19];
    var tally = (parseInt(value[0]) - 1) * weighting[0];
    for (var i = 1; i < value.length; i++) {
        tally += (parseInt(value[i]) * weighting[i]);
    }
    return (tally % 89) == 0;
}
jQuery.validator.addMethod('abnValidate', abnValidate, 'This ABN is not valid');

我已经在JSFiddle中尝试过了，但是我只得到了一个错误：

代码语言：javascript
复制
{"error": "Please use POST request"}

我怀疑这是一种不知道如何正确配置代码的情况。有人能看看我错过了什么吗？

编辑

这是所要求的完整表格。

代码语言：javascript
复制
            @model JobsLedger.ViewModels.CompanyDetailsViewModel

        <form asp-action="Edit">
            <br />
            <div class="form-horizontal container">


                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2><span class="glyphicon glyphicon-edit"></span> Edit Company Details </h2>
                        <hr>
                    </div>
                </div>

                <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="CompanyDetailsId" />


                @*ROW ONE*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="CompanyName" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="CompanyName" class="form-control" />
                                <span asp-validation-for="CompanyName" class="text-danger" />
                            </div>
                        </div>
                    </div>

                </div>
                @*ROW TWO*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="ContactFirstName" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="ContactFirstName" class="form-control" />
                                <span asp-validation-for="ContactFirstName" class="text-danger" />
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="ContactLastName" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="ContactLastName" class="form-control" />
                                <span asp-validation-for="ContactLastName" class="text-danger" />
                            </div>
                        </div>
                    </div>

                </div>

                @*ROW THREE*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="ContactEmail" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="ContactEmail" class="form-control" />
                                <span asp-validation-for="ContactEmail" class="text-danger" />
                            </div>
                        </div>
                    </div>



                </div>

                @*ROW FOUR*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="MobilePhone" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="MobilePhone" class="form-control" />
                                <span asp-validation-for="MobilePhone" class="text-danger" />
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="OfficePhone" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="OfficePhone" class="form-control" />
                                <span asp-validation-for="OfficePhone" class="text-danger" />
                            </div>
                        </div>
                    </div>

                </div>


                @*ROW FIVE*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="CompanyEmail" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="CompanyEmail" class="form-control" />
                                <span asp-validation-for="CompanyEmail" class="text-danger" />
                            </div>
                        </div>
                    </div>

                </div>

                @*ROW SIX*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="ABN" class="col-md-4 col-lg-4 control-label"></label>
                            <div class="col-md-8 col-lg-8">
                                <input asp-for="ABN" class="form-control" />
                                <span asp-validation-for="ABN" class="text-danger" />
                            </div>
                        </div>
                    </div>

                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"><strong>Company Address Details</strong></h4>
                    </div>
                    <div class="panel-body">

                        @*ROW SEVEN*@
                        <div class="row">

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="Street1" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="Street1" class="form-control" />
                                        <span asp-validation-for="Street1" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="Street2" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="Street2" class="form-control" />
                                        <span asp-validation-for="Street2" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                        </div>


                        @*ROW EIGHT*@
                        <div class="row">

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="State" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <select asp-for="State" asp-items="@Model.StatesList" class="form-control"></select>
                                        <span asp-validation-for="State" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="Suburb" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="Suburb" class="form-control">
                                        <span asp-validation-for="Suburb" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="Postcode" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="Postcode" class="form-control" readonly="readonly" />
                                        <span asp-validation-for="Postcode" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"><strong>Company Bank Details</strong></h4>
                    </div>
                    <div class="panel-body">

                        @*ROW NINE*@
                        <div class="row">

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="BankName" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="BankName" class="form-control" />
                                        <span asp-validation-for="BankName" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="BankBSB" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="BankBSB" class="form-control" />
                                        <span asp-validation-for="BankBSB" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label asp-for="BankAccount" class="col-md-4 col-lg-4 control-label"></label>
                                    <div class="col-md-8 col-lg-8">
                                        <input asp-for="BankAccount" class="form-control" />
                                        <span asp-validation-for="BankAccount" class="text-danger" />
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                @*ROW TEN*@
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="col-md-4 col-lg-4 control-label">Update Form:</label>
                            <div class="col-md-8 col-lg-8">
                                <input type="submit" value="Save" class="btn btn-default" />
                            </div>
                        </div>
                    </div>

                </div>

                @*Closing DIV for class horizontal*@

            </div>

        </form>

        <div>
            <a asp-action="Index">Back to List</a>
        </div>

        @section Scripts {
            <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
            <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>


            <script type="text/javascript">
                //<![CDATA[
                $(document).ready(function () {



                    function abnValidate(value, element) {
                        if (value.length != 11 || isNaN(parseInt(value)))
                            return false;
                        var weighting =
                        [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
                        var tally = (parseInt(value[0]) - 1) * weighting[0];
                        for (var i = 1; i < value.length; i++) {
                            tally += (parseInt(value[i]) * weighting[i]);
                        }
                        return (tally % 89) == 0;
                    }
                    jQuery.validator.addMethod(
                    'abnValidate',
                    $("#ABN"), 'This ABN is not valid'
                    );


                });

                //]]></script>

        }
javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-12 09:34:30

从您的示例中可以看出，在上面的表单上，您实际上是在何处调用验证方法，或者是否正在调用该方法。您使用的是自定义添加方法，您可能希望使用该方法验证表单字段的<input type="text" name="abnValidate" />。您的自定义方法需要返回true以使abnValidate字段有效。如果方法返回false，它应该返回作为addMethod的第三个参数的消息。

jQuery.validator.addMethod() Description：添加自定义验证方法。它必须由一个名称(必须是合法的javascript标识符)、一个基于javascript的函数和一个默认的字符串消息组成。 方法类型:函数() 实际的方法实现，如果元素有效，则返回true。第一个论点:当前值。第二个论点:验证元素。第三个论点:参数。

另一件事是，您打算如何发送表单数据。验证插件不会为您发送表单。它将通过定义将元素与验证方法关联的特定规则来验证您告诉它要验证的字段。由于您没有向form元素提供任何属性来定义用于发送表单的HTTP方法，或者应该负责处理表单数据的URI，因此很难判断您在做什么。您不必为表单提供使用验证插件所需的信息。

validate方法有一个submitHandler选项，它是处理实际表单提交的回调，如果表单有效，将调用该选项。

submitHandler(default:本地表格提交) 类型:函数() 回调，以便在表单有效时处理实际提交。获取作为唯一参数的窗体。替换默认提交。验证后通过Ajax提交表单的合适位置。

从文档中可以看出，您只需使用submitHandler通过ajax发送表单数据，或者对表单数据进行任何其他优化。

总而言之。下面是一个例子，说明这可能是什么样子。希望能帮上忙。

​

代码语言：javascript
复制
$(function() {

  // Your custom validation method added to the validate plugin
  jQuery.validator.addMethod( 'abnValidate', function abnValidate(value, element) {
    if (value.length != 11 || isNaN(parseInt(value)))
      return false;
    var weighting =
        [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
    var tally = (parseInt(value[0]) - 1) * weighting[0];
    for (var i = 1; i < value.length; i++) {
      tally += (parseInt(value[i]) * weighting[i]);
    }
    return (tally % 89) == 0;
  }, 'This ABN is not valid');

  // call the validate method on your form element.
  $(".validation-form").validate({
    debug: true,
    // define a rule for the form field which will make use of your abnValidate method.
    rules: {
      "abnValidate": {
        abnValidate: true,
      }
    },
    submitHandler: function (form) {
      // 'form' is your form element being validated, do somethig with it.

      var data = $(form).serializeArray();
      console.log(data);
      
    }
  });

});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form class="validation-form">
    <input type="text" name="abnValidate" />
    <button class="submit-form">submit</button>
</form>

<div class="form-status">form not yet submitted</div>

​

票数 0
EN

Stack Overflow用户

发布于 2016-04-12 08:08:52

您必须在某个地方添加以下内容

代码语言：javascript
复制
<form method="POST">
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/36567145

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档