Validate.js custom method

Question

in the form i'm creating javascript generates dinamically a certain number of divs (depending on user s choice) which are containing text inputs. Javascript is also genarating class and names for the inputs as follows:

DIV1

<input class="pax_from0" type="text" name="pax_from0" aria-required="true">
<input class="pax_to0" type="text" name="pax_to0" aria-required="true">

DIV2

<input class="pax_from1" type="text" name="pax_from1" aria-required="true">
<input class="pax_to1" type="text" name="pax_to1" aria-required="true">

DIV3

<input class="pax_from2" type="text" name="pax_from2" aria-required="true">
<input class="pax_to2" type="text" name="pax_to2" aria-required="true">

and so on...

Now i' m trying to validate the form with validate.js so that ...for example...pax_from1 MUST have higher value then pax_to0.

I 've made a draw to outline the concept better

This is the code I wrote so far...

new.js

(This file creates dinamically the elements within a for loop ...here i'm adding the roles to the elements i ve just created)

$("input[name=pax_to"+i+"]").rules("add", {
        required: true,
        digits:true
});
$("input[name=pax_from"+i+"]").rules("add", {
        required: true,
        digits:true
});
if($("#element1").length>0){   //at least 1 div exists
   $("input[name=pax_from"+i+"]").rules("add", {
      checkPrevValuePaxTo : true
    });
}

validate-new.js

(This is the javascript file that validates my form, the custom method i've created is checkPrevValuePaxTo )

$(function () {

$('#create-new-route').validate({

    rules: {
        origine: {
            required: true
        },
        destinazione: {
            required: true
        },
        pippi: {
            required: function () {
                return $('#element0').length > 0;
            }
        }
    },

    messages: {
        origine: {
            required: "Inserire la località di partenza"
        },
        destinazione: {
            required: "Inserire la località di destinazione"
        },
        fasce_select: {
            required: "Inserire almeno una fascia di prezzo"
        }
    },

    submitHandler: function () {
        if ($('#element0').length <= 0) {
            alert("E' necessario creare almeno una fascia di prezzo");
            return false;
        }
        saveForm(json);
        return false;
    }
});

jQuery.validator.addMethod("checkPrevValuePaxTo", function (value, element) {

    var el = element.className;
    var temp = el.match(/\d+/g).map(Number);
    var i = temp - 1;

    var elPrevious = $("input[name=pax_to" + i + "]");
    if (elPrevious) {
        var valPrevious = $(elPrevious).val();
    }

    var final = (parseInt(value) <= parseInt(valPrevious));

    if (final == true) {
        return false;
    }
}, "my msg");

});

this code shows the message even if the condition is not met;

Can anyone give me a hint?

Answer 1

You have no return true in your custom validation:

jQuery.validator.addMethod("checkPrevValuePaxTo", function (value, element) {

var el = element.className;
var temp = el.match(/\d+/g).map(Number);
var i = temp - 1;

var elPrevious = $("input[name=pax_to" + i + "]");
if (elPrevious) {
    var valPrevious = $(elPrevious).val();
}

return !(parseInt(value) <= parseInt(valPrevious));

}, "my msg");

Answer 2

In your custom method, if the conditional fails, nothing is returned...

if (final == true) { 
    return false;
}  // otherwise return nothing?

Instead of adding an else or return true , simplify it greatly by eliminating the final variable and the conditional. After all, there's not much point in comparing a boolean to a boolean.

return !(parseInt(value) <= parseInt(valPrevious));

Also, you do not need to use var more than once...

jQuery.validator.addMethod("checkPrevValuePaxTo", function (value, element) {

    var el = element.className,
        temp = el.match(/\d+/g).map(Number),
        i = temp - 1,
        elPrevious = $("input[name=pax_to" + i + "]"),
        valPrevious;

    if (elPrevious) {
        valPrevious = $(elPrevious).val();
    }

    return !(parseInt(value) <= parseInt(valPrevious));

}, "my msg");