【发布时间】：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 本身？