关键词：
【中文标题】用户输入数字时，jquery验证不显示错误消息【英文标题】：jquery validation does not show error message when user input number 【发布时间】：2021-06-01 16:36:40 【问题描述】：您好，我在使用 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>
任何想法是什么导致了这个问题？ 非常感谢。
【问题讨论】：
您可能需要重新考虑使用内联 JavaScript 事件处理程序 (onkeypress)，同时还要使用此 jQuery 插件。验证也发生在keyup 事件上。你要哪个代码？
你在哪里包含了 jQuery 本身？
【参考方案1】：
添加脚本
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
并删除覆盖它的onkeypress="return /[a-z]/i.test(event.key)"
【讨论】：
【参考方案2】：我在我的机器上测试过，效果很好。
在“频道名称”的情况下，“onkeypress”用于阻止输入数字，但如果使用粘贴，则可以输入数字，并出现“请仅提供字母”消息。
对于“Channel Id”或“Channel Access Tokenn”，当您将其包含在“rules”中时会出现。
$.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>【讨论】：
我不确定为什么在我的机器中没有出现该消息。 @PanhaSeav 我将其更改为 sn-p。似乎在***上工作。如果还有什么，请告诉我 @PanhaSeav，可能是因为您试图在没有首先包含 jQuery 库的情况下包含和使用 jQuery 插件。每当用户选择错误的角度输入时，向用户显示错误消息？
】每当用户选择错误的角度输入时，向用户显示错误消息？【英文标题】：Showusersanerrormessagewhenevertheyselectwronginputinangular?【发布时间】：2018-05-0704:07:18【问题描述】：我正在用Angular构建一个组件（html、css、spec.ts、ts），我一直... 查看详情
jQuery 验证插件问题不适用于数字字段
...证插件，它正在部分工作。验证电子邮件字段没有问题（输入时显示两个错误的电子邮件），但电话号码字段未得到验证。它显示消息“请输入手机号码”但不显示“请输入有效的手机号码”。<script 查看详情
导航返回时不清除文本输入并验证错误消息
】导航返回时不清除文本输入并验证错误消息【英文标题】：Don\'tcleartextinputandvalidateerrormassagewhennavigateback【发布时间】：2021-04-2512:30:15【问题描述】：我正在使用getx进行状态管理。键入文本或显示textFormField的错误消息后，我... 查看详情
无效时 JQuery 验证插件单选按钮“错误显示”
...于错误消息的显示方式，我知道插件使用标签来显示每个输入的错误消息。但我已经为这些 查看详情
jQuery 不显眼的表单验证器在重置表单时不会隐藏错误消息
...的字段。然而，当我去重置我的表单时——我只看到我的输入的红色背景清晰，而不是验证消息。根据jQ 查看详情
表单验证不显示消息
...述】：我正在尝试让我的javascript验证电话号码输入并在用户输入错误信息时显示消息。我设置了另外两个输入来执行此操作，因此我复制了其中一个并将名称替换为phoneNumber但没有结果。请不要使用HTML替代品，我必须将其用于... 查看详情
TextFormField 在验证时不显示错误
...现错误消息，我该如何显示？我正在使用Stepper类来处理用户的注册，当尝试使用setState实现基本验证时，当前正在验证的文本字段中不会显示错误消息这是我的代码：...class_R 查看详情
关于 jQuery 验证的不同错误消息
...题描述】：我正在使用jQuery验证插件。我有一个必需的url输入，当它为空时返回错误“此字段是必需的。”。我想要的是当这个输入的值为\'home\'时，将错误更改为“已经有一个主页”。但仅当在输入字段中输入“家”时。这是... 查看详情
为啥输入验证码时明明输入正确却显示错误
...自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝... 查看详情
maxlength 属性的角度验证消息
...显示我的错误消息。有什么方法可以关闭默认行为（允许用户输入更多字符），以显示我的错误消息。文本区域 查看详情
jQuery 验证：如何不显示错误？或如何将错误显示为工具提示？
...:00:35【问题描述】：我希望我的错误浮在左对齐的未验证输入字段上方。我该怎么做？如果我不能，我该如何关闭错误？我仍然希望字段验证（并突出显示错误），但不希望显示实际的错误消息。我似 查看详情
如何在输入中获取 jQuery 验证错误类
】如何在输入中获取jQuery验证错误类【英文标题】：HowtogetjQueryvalidateerrorclassintheinput【发布时间】：2016-06-0122:13:18【问题描述】：我正在使用jQuery验证插件，但遇到了错误消息显示方式的问题。通过查看开发人员工具，我发现错... 查看详情
Asp.net 客户端验证错误消息不断显示来自 jquery 的值更改
...布时间】：2017-06-2601:33:04【问题描述】：我正在使用带有输入标记的asp.net客户端验证。此输入字段是必填字段，因此当输入没有值时显示。然后，当我使用jquery更改输入标记的值时， 查看详情
jQuery 验证 errorLabelContainer
...，但似乎我不理解“errorLabelContainer”或validate.js我有两个输入，姓名和电子邮件。我想控制消息显示的位置而不是在输入标签下& 查看详情
密码或用户名错误时如何显示错误消息？
】密码或用户名错误时如何显示错误消息？【英文标题】：HowcanIshowerrormessagewhenwrongpasswordorusername?【发布时间】：2022-01-1514:24:54【问题描述】：如果在MongoDB上输入的用户名或密码不同，如何显示错误消息？我不知道我的方法是... 查看详情
Vue.js BootstrapVue：Veevalidate 不显示电话号码输入的验证错误消息
】Vue.jsBootstrapVue：Veevalidate不显示电话号码输入的验证错误消息【英文标题】：Vue.jsBootstrapVue:Veevalidatedoesnotshowthevalidationerrormesageforphonenumberinput【发布时间】：2020-04-1403:02:57【问题描述】：在我的Laravel+Vue.jsSPA（单页应用程序）... 查看详情
jQuery 日期选择器验证问题
...布时间】：2012-11-2822:33:16【问题描述】：我正在尝试验证用户选择日期的两个输入框-我已经设法限制用户选择上一个日期，如果他们选择第一个文本框作为今天的日期，则下一个输入框必须提前一天（未来的日期）在提交时，... 查看详情
jquery验证插件不在rails中显示错误消息
】jquery验证插件不在rails中显示错误消息【英文标题】：jqueryvalidationpluginnotdisplayingerrormessageinrails【发布时间】：2012-11-1901:26:19【问题描述】：我正在尝试在Rails中进行Jquery客户端验证..我的以下代码工作正常http://jsfiddle.net/hr1383/... 查看详情