Jquery Validation dynamically add rules for each input once form generated

Your code:

$("#readingForm").validate({
    invalidHandler: function () { //display error alert on form submit              
        EMPGlobal.showAlert('', '', 'danger', 'There was an error' , '', '', '', 'warning');
    },
    submitHandler: function (){     
        $('#readingForm .meter-val').each(function(){
            $(this).rules( "add", {
               ///
            });
        });
        $('#readingForm .insert-val').each(function(){
            $(this).rules( "add", {
                ///
            });
        });
        $.ajax({
            ///
        });
    }
});

it attempts to submit the form on the first click, and then check the rules on the second.

While you should not put the .rules() method anywhere inside of the .validate() method, it certainly makes no sense inside of the submitHandler. Since the submitHandler only fires when the form is valid, it's too late to be adding/evaluating any new rules... this is why you have to click twice.

I do not know the names of the inputs in advance, I need to add the rules after the form is loaded and before a user submits the form.

1. Call .validate() as soon as the form itself is created. This is what initializes the plugin. Do it one time inside the DOM ready handler if the form exists when the page loads. Otherwise, do it one time immediately after the form is loaded/created.

2. Call the .rules() method as soon as the form's inputs are created. Do it outside of the .validate() method. If the input elements are created at the same time as the form, simply call the .rules() method after you call .validate().

// Call .validate() ONCE, after form is created.

$("#readingForm").validate({
    invalidHandler: function () { //display error alert on form submit              
        EMPGlobal.showAlert('', '', 'danger', 'There was an error' , '', '', '', 'warning');
    },
    submitHandler: function (){     
        $.ajax({
            url: 'include/pages/readings.php?',
            data: $(this).serialize(),
            type: 'POST',
            success: function (data) {
                EMPGlobal.showAlert('', '', 'success', message, '', '', '', 'success', jqXHR.status);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                returnMes = $.parseJSON(jqXHR.responseText);
                message = 'A ' + jqXHR.status + ' ' + errorThrown + ' error occured. <br /> <i>Message Details: ' + returnMes + '</i>';
                EMPGlobal.showAlert('', '', 'danger', message, '', '', '', 'warning', jqXHR.status);
            },
        });
    }
});

// Call .rules() ONCE, after relevant elements are created AND after .validate().

$('#readingForm .meter-val').each(function(){
    $(this).rules( "add", {
        required: true,
        number: true,
        minlength: 2
    });
});
$('#readingForm .insert-val').each(function(){
    $(this).rules( "add", {
        required: true,
        minlength: 10,
        date: true
    });
});