Bootstrap x-editable: Validate field against value from another

Question

I'm trying to validate the value from one field against another because the editable field's value cannot be higher than the other. I am unsure how to make the 'validate' option work.

var field_1 = $('#field_1').val();

$('#field_2').editable({
    container: 'body', 
    type: 'text',
    pk: $(this).data('data-pk'),
    value: $(this).data('data-value'),
    url: 'update.php',
        validate: function (value) {
            if (value > field_1) {
                return "error message";
            }
        }
});

The validation validates as an error if the value is lower, the same or higher than field_1, not just if the value is higher.

What I am doing wrong and how can I make it work?

UPDATE:

Just tested to see what field_1 was returning and it's returning blank. The value is not being passed to validate. How can I pass field_1's value to validate?

Answer 1

After some testing, I finally made it work and here's what I did just in case someone else has the same problem.

field_1 was another editable field and var field_1 = $('#field_1').val(); was returning blank because the value of that field was stored in 'data-value', so I switched to var field_1 = $('#field_1').attr('data-value');

now field_1 returns the value that I need to compare against field_2.