jquery验证自定义验证无效

时间:2017-05-03 08:37:56

标签: javascript jquery jquery-validate

$(document).ready(function () {
 jQuery.validator.addMethod("insz", function (value, element) {
        var insz = $('#txtINSZ').val()
        var controle = parseInt(insz.substring(13, 15))
        var getal = insz.substring(0, 2) + insz.substring(3, 5) + insz.substring(6, 8) + insz.substring(9, 12)
        var rest = parseInt(getal) % 97
        alert("we doin' this mun")
        return 97 - rest == controle;
    }, "* Amount must be greater than zero");
    $('#form1').validate({
        rules: {
        
            txtINSZ: {
                required: $('#cbInsz').prop('checked') == false,
                insz: function () {
                    $('#cbInsz').prop('checked') == true;
                }
                }
        },
 

        showErrors: function (errorMap, errorList) {
            this.defaultShowErrors();// to display the default error placement
         
                 
        }
        
    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<form method="post" action="#" id="form1" a="" novalidate="novalidate">
        <div id="container">
           
    <div class="container-fluid">
        <div class="col-xs-12">
        <div class="form-horizontal col-xs-4" id="divDimLeft">


            <span id="lblTitleAlgemeen">Algemen Informatie</span>
            <div class="checkbox" style="margin-left:20px;">
                <span id="lblCheck">
                    <input type="checkbox" id="cbInsz" checked="">
                    INSZ nummer werknemer gekend?
       
                </span>
            </div>
            <div class="form-group" id="divINSZ">

                <span id="lblINSZ" class="required" for="txtINSZ" aria-required="true">INSZ-nummer gekend?</span>
                <input name="ctl00$ContentPlaceHolder1$txtINSZ" type="text" maxlength="15" id="txtINSZ" class="form-control required form valid" oninput="autoInvullen()" aria-required="true" placeholder="__.__.__-___.__" aria-invalid="false" required=""><label id="txtINSZ-error" class="error" for="txtINSZ" style="display: none;"></label>
            </div>
            <div class="form-group">
                <span id="lblNaam" class="required" for="txtNaam" aria-required="true">Naam</span>
                <input name="ctl00$ContentPlaceHolder1$txtNaam" type="text" maxlength="40" id="txtNaam" class="form-control form requiredField error" aria-required="true" aria-invalid="true"><label id="txtNaam-error" class="error" for="txtNaam">Dit veld is verplicht.</label>
          
        </div>
        <div id="divButton" class="text-right" style="width: 87.5%">
            
            <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Volgende" id="btnSubmit" class="btn btn-primary col-xs-2" style="float: none; min-width:200px;">

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

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

我想制作一个自定义验证器但由于某种原因它根本不起作用。必需的确有效,因此在页面中找到元素没有问题。那么是否有人知道它为什么不起作用?

提前到达,在这里你可以找到我正在使用的代码,包括我编写的方法和验证方法的开始。

2 个答案:

答案 0 :(得分:0)

您不能仅将比较运算符全部作为参数插入;你需要一个function来返回这个参数的值,在本例中是一个来自比较运算符的布尔值......

$('#form1').validate({
    rules: {
        txtINSZ: {
            required: function() {
                return $('#cbInsz').prop('checked') == false;
            },
            insz: function() {
                return $('#cbInsz').prop('checked') == false;
            }
            ....

答案 1 :(得分:0)

我也遇到了这种情况,但是在我的情况下,以下两个步骤可以正常工作。 1.在要为其进行自定义验证的HTML输入元素上使用data-rule-insz =“ true”属性。 2.还要添加一个名称属性,如下面的示例所述:-

<input id="customer" name="customer" data-rule-insz="true" required type="text" class="typeahead form-control" />

这解决了我的问题。

相关问题