jquery validate custom validation not working

Question

 $(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>

I wanted to make a custom validator but for some reason it's not working at all. The required does work so there is no issue with finding the elements in my page. So is there someone who has any idea why it is not working?

Thans in advance, under here you find the code i'm using including the method I wrote and the start of the validate method.

Answer 1

You can't just insert a comparison operator all by itself as the parameter; you need a function that returns the value of this parameter, in this case a boolean from the comparison operator...

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

Answer 2

Solved it, I just putted the rules out of the rules section. After the validation code I putted this:

 $('#txtINSZ').rules("add", {
    required:true,
insz:true
})

Works perfectly.

Answer 3

I also faced the same situation, but in my case below two steps worked.

1. use data-rule-insz="true" attribute on your HTML input element for which you want custom validation.

2. also add a name attribute as mentioned in the below example:-

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