client side range validation dynamically

Question

I have a field "Width" which I only know the range that is permissible at runtime.

how can I add client side validation to allow between the range.

I can pass the max and min as hidden fields if needed?

should i use jquery to add these properties to the input field?: data-val-range-min="1" data-val-range-max="10" data-val-range="message"

(FYI im using the fluentvalidation framework too)

Answer 1

I see that you are using JQuery (tag) so you can do the validation as follows:

For a working example, see: http://jsfiddle.net/f9KS3/

$(function() {

    $('input').each(function() {
        var $me = $(this);

        var min = $me.attr('data-val-range-min');
        var max = $me.attr('data-val-range-max');
        var message = $me.attr('data-val-range');

        $me.blur(function() {
            var val = parseInt($me.val());

            if(!$.isNumeric(val) || val < min || val > max) {
                alert('Error (' + message + ')! Field value must be numeric and between ' + min + ' and ' + max);
            }
        });

    });

});

If you want to change the range at runtime then just move the min, max and message variables into the blur function and change the data-val-*-attributes with JQuery f.e. and the validation will work as you expect.