I want validate two input types on my site. The second field must be less than the first. Otherwise, an addClass is to be activated for a message. addClass.Message .show_the_massage The IDs and names are fix and can't change.

html:

<div class="wapf-section">
<form id="sample">
    <input type="text" name="wapf[field_6169527c6979a]" id="6169527c6979a" value="">
    <input type="text" name="wapf[field_616ebcec0c389]" id="616ebcec0c389" value="">
    <br/>
</form>
<div>

JQuery:

jQuery(document).ready(function ($) {

    $.validator.addMethod('lessthenother', function (value, element, param) {
        return this.optional(element) || parseInt(value) <= parseInt($(param).val());
    }, 'Invalid value');


    $('.wapf-section').validate({
        errorElement: "small",
        rules: {
            bid_auto_decrement: {
                lessthenother: '6169527c6979a'
            }
        },
        messages: {
            wapf[field_616ebcec0c389]: {
                lessthenother: 'Must be less than bid price.'
            }
        }
    });
    
    $('[name="wapf[field_6169527c6979a]"]').on('change blur keyup', function() {
        $('[name="wapf[field_616ebcec0c389]"]').valid();
    });
    
});