在文本输入按键上,我想显示没有任何插件的验证错误 [英] On text-input keypress I want to show validation error without any plugin

查看:76
本文介绍了在文本输入按键上,我想显示没有任何插件的验证错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在文本输入按键上,我想显示没有任何插件的验证错误. 我正在尝试编写可在任何页面中使用的通用jQuery函数. 错误弹出窗口应该是动态的.

On text-input keypress I want to show validation error without any plugin. I am trying to code a generic jQuery function which I could use in any page. The error pop-up should be dynamic.

function checkno(txt,e) {

    $(txt).keypress(function (e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            if (!document.getElementById('spanmsg')) {
                $(txt).after("<span id='spanmsg'  class='fixed'>This is wrong input</span>")                    
                $('#spanmsg').show(0).delay("500").hide(0);
                txt.value = '';
            }
            else {                    
                $('#spanmsg').show(0).delay("500").hide(0);
                txt.value = '';
            }
            return false;
        }
    });

}

推荐答案

我将整个代码放在下面,

I have put whole code below,

<html>
<head>
    <title>Please Rate if it helps</title>
    <!-- PUT A PATH OF JQUERY LIBRARY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <script>
        window.onload = function () {
            $("#txt").keypress(function (e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    if (!$(txt).next().hasClass("spanmsg")) {
                        var error = $("<div class='spanmsg'>This is wrong input</div>");
                        $(txt).after(error);
                        $(error).css({
                            top: ($(txt).position().top + 1) + "px",
                            left: ($(txt).position().left + 1) + "px",
                            width: $(txt).width() + "px",
                            height: $(txt).height() + "px"
                        });
                    }
                    $(this).next().show(0).delay("500").delay(500, function () {
                        $(this).remove();
                    });
                    this.value = '';
                    return false;
                }
            });
        }
    </script>
    <style>
        .spanmsg {
            position: absolute;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" id="txt">
</body>
</html>

如果有帮助,请评分...

Rate if it helps you...

这篇关于在文本输入按键上,我想显示没有任何插件的验证错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆