输入无效时在文本框上显示警报

Question

I know that I can restrict textbox to pass only numeric with this:

<input type="number" id="box_1">

But alert is showing only after clicking submit button. How can I show it in on-key event with JavaScript?

Answer 1

Go with Jquery. something like this:

<input type="text" class="numbersOnly" value="" />

And:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Answer 2

I think you should use this : it detects if the user has entered letters

<script type="text/javascript">
    $(document).ready(function () {
        var txtbox_1 = $('#box_1');

        // Setup the event
        txtbox_1.focusout(function () {
            var last = $.data(txtbox_1, "last");
            if ($(this).val().match(/[a-z]/i))
                alert("Letters");
        });
    });
</script>

<input id="box_1" name="box_1" type="number">

Answer 3

Hey I think You want something like this.

Check it jsfiddle