I have a form set up, with dynamic fields that get added only if they're needed by the user.

I need to be able to validate the fields (if they're there), before postback in jquery. The fields are integers and what I really want to do is add the sum of the dynamic fields to make sure they're greater than x figure.

But As far as I can work out, I can't get the value of the field because its not in the DOM yet.

I've created a JSFiddle to demonstrate the problem. I want to add up the values on an onblur event, it can't be on click of the main submit button unfortunately.

Here is some of the code

$(document).on('blur', '.rent-percent', function () {
        var id = this.id;
        console.log(this);
        var value = $('#' + id).val()
        $('#total').append(value * count);

    });

Try this one and make sure you're not using outdated version of jQuery:

$(document).on('blur', '.rent-percent', function () {
    if(!$.isNumeric($(this).val())){
        $(this).val('');
        return alert('Not a Number!');
    }
    var c = 0;
    $('.rent-percent').each(function(){
          c += parseInt($(this).val());
    });
    $('#total').html('<h3>Total</h3>'+c);
});

JSFiddle

more