How To Restrict Max Value On Html5 Number Input On Manual Entry

Free jqgrid column is defined to use html5 number input type like { name: 'amount', width: 62, template: 'number', formatter: 'number', formatoptions: {decimalSeparato

Solution 1:

Try to use something like the following

{
    name: "amount",
    width: 62,
    template: "number", // formatter: "number"
    formatoptions: {
        decimalSeparator: ",",
        thousandsSeparator: " ",
        decimalPlaces: 2,
        defaultValue: "0,00"
    },
    editoptions: {
        maxlength: 7,
        type: "number",
        max: "9999",
        dataEvents: [
            {
                type: "blur",
                fn: function (e) {
                        if (e.target.checkValidity()) {
                            $(e.target).removeClass("ui-state-error");
                        } else {
                            $(e.target).addClass("ui-state-error");
                            alert(e.target.validationMessage);
                            $(e.target).focus();
                        }
                    }
            }
        ]
    }

}

The above code calls checkValidity() method of <input type="number">. Of cause you need to include additional tests in the code like validation that e.target.checkValidity is a function (for the case of executing in old web browser) and some other. The above code just shows the main idea of validation which uses functionality of <input type="number">.

See the demo http://jsfiddle.net/OlegKi/jhckz7rr/8/, which works for both inline editing and form editing.

Solution 2:

Create validation on input with jQuery.

Event listeners are attached on edit click, and removed on save click. I used setTimeout, to be synchronized with free-jqgrid elements manipulation - as the proper solution will be to extend free-jqgrid functionality

function restrictMax(){

    var max = parseFloat($(this).attr('max'))
    var value = parseFloat($(this).val())
    if($(this).val() > max){
        $(this).val(max)
    }
}
setTimeout(function(){
    $('.fa-pencil').click(function(){ //click on edit
        var thatParent = $(this).closest('tr')
        setTimeout(function(){

            thatParent.find('input[type="number"]').on('input',restrictMax)
        },0);
    })
    $('.fa-floppy-o').click(function(){ //click on save
        var thatParent = $(this).closest('tr')
        setTimeout(function(){
            thatParent.find('input[type="number"]').off('input',restrictMax)
        },0)
    })

},0)

http://jsfiddle.net/jhckz7rr/6/