当用户输入数字时，jquery 验证不显示错误消息

如何解决当用户输入数字时，jquery 验证不显示错误消息

您好，jquery 验证插件有这个问题。我试图只允许我的表单使用字母，它正在工作，但是当用户输入数字时，它不会显示假设为“请仅提供字母”的消息，它应该在该框下。谁能帮我这个问题？代码如下：

<!DOCTYPE html>
<html>

<head>
    <Meta charset="utf-8" />
    https://developer.zendesk.com/apps/docs/developer-guide/setup#using-zendesk-garden
    https://garden.zendesk.com/css-components/bedrock/
    https://garden.zendesk.com/css-components/utilities/typography/
    <link rel="stylesheet" href="css/w3.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-bedrock@7.0.21,npm/@zendeskgarden/css-utilities@4.3.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="jquery-2.2.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/additional-methods.min.js"></script>
<!--    <script src="main.js"></script>-->



    <div id="main" style="height: 100%; width: 100%;">
        <script>
            $(function() {
                $("#main").load("header.html");
            });
        </script>
    </div>

    <style>
        .labels {
            font-size: medium;
            font-family: system-ui;
        }
        
        .required::before {
            content: " *";
            color: red;
            font-size: larger;
        }
        
         ::placeholder {
            font-weight: lighter;
            font-size: small;
            color: #84878b;
        }
    </style>
</head>


<body>

    <div id="lineContent" style="width:100%;">

        <div class="w3-row">


            <div class="w3-col l10 m7 s4  w3-right">
                <div style="margin-bottom: 30px;">
                    <p><a href="accounts.html">Add Accounttt </a>>> LINE</p>

                </div><br>


                <form name="lineform" id = "line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
                    <div>
                        <p class="labels required">Channel Name:</p>
                        <p class="labels"><input onkeypress="return /[a-z]/i.test(event.key)" type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" style="width: 700px;" required></p>
                    </div><br>
                    <div>
                        <p class="labels required">Channel Id:</p>
                        <p class="labels "><input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" style="width: 700px;" required></p>
                    </div><br>
                    <div>
                        <p class="labels required">Channel Access Tokenn:</p>
                        <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 700px;" required></p>
                    </div><br>



                    <div>
                        <button style="background-color:#1f73b7; color:white; width:8%; height: 35px; border: none; border-radius: 3px;" type="submit">Submit</button>
                    </div><br>

                </form>


            </div>

        </div>
    </div>

     <script>



         $.validator.addMethod("lettersonly",function(value,element) {
             return this.optional(element) || /^[a-z\s]+$/i.test(value);
         },"Please provide only alphabets");

         $('#line-form').validate({

             rules: {
                 chname: {
                     lettersonly: true,}
             },messages: {
                 chname: {
                     required: ''
                 }
             },});



     

     </script>
</body>

</html>

任何想法导致此问题的原因是什么？非常感谢。

解决方法

添加脚本 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js 并删除覆盖它的 onkeypress="return /[a-z]/i.test(event.key)"

我在我的机器上测试了它，它工作正常。

在'Channel Name'的情况下，'onkeypress'是用来屏蔽数字输入的，但是如果你使用paste，你可以输入数字，并且出现'请只提供字母'的信息。

对于“Channel Id”或“Channel Access Tokenn”，当您将其包含在“规则”中时会出现。

$.validator.addMethod("lettersonly",function(value,element) {
    return this.optional(element) || /^[a-z\s]+$/i.test(value);
},"Please provide only alphabets");

$('#line-form').validate({

    rules: {
        chname: {
            lettersonly: true,},chid: {
            lettersonly: true,chtoken: {
            lettersonly: true,}
    },messages: {
        chname: {
            required: ''
        }
    },});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/additional-methods.min.js"></script></script>

<div id="lineContent" style="width:100%;">
    <div class="w3-row">
        <div class="w3-col l10 m7 s4 w3-right">
            <div style="margin-bottom: 30px;">
                <p><a href="accounts.html">Add Accounttt </a>>> LINE</p>
            </div><br>

            <form name="lineform" id="line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
                <div>
                    <p class="labels required">Channel Name:</p>
                    <p class="labels"><input type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" style="width: 700px;" required></p>
                </div><br>
                <div>
                    <p class="labels required">Channel Id:</p>
                    <p class="labels "><input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" style="width: 700px;" required></p>
                </div><br>
                <div>
                    <p class="labels required">Channel Access Tokenn:</p>
                    <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 700px;" required></p>
                </div><br>
                <div>
                    <button style="background-color:#1f73b7; color:white; width:8%; height: 35px; border: none; border-radius: 3px;" type="submit">Submit</button>
                </div><br>
            </form>
        </div>
    </div>
</div>