Skip to content Skip to sidebar Skip to footer

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

functionrestrictMax(){

    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 editvar thatParent = $(this).closest('tr')
        setTimeout(function(){

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

},0)

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

Post a Comment for "How To Restrict Max Value On Html5 Number Input On Manual Entry"