我正在尝试验证带有标题的下拉菜单(例如先生、夫人、女士..)，我需要将其作为必填字段，并在未选择标题时显示错误消息。
我能够通过使用 jquery 规则部分中的名称属性来验证所有其他字段(它们是输入)并显示我想要的消息。
但是对于标题字段，名称属性不像输入那样起作用，我找不到解决方案。
关于如何解决这个问题有什么见解吗？ 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="diabetestool.css">
<title>Zedland Health Authority diabetes tool Contact form</title>
</head>
<body>
<header>
<h1>Zedland Health Authority<br>Contact Us</h1>
</header>
<main >
<form id="contactForm">
<div id="left">
<fieldset id="title_field">
<label for="title">Title*</label>
<p class="donotdisplay" id="titleMessage">Select a Title</p>
<select name="title" id="title">
<option value="-1">Please select your Title</option>
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="master">Master</option>
</select> <span class="error">title</span>
</fieldset>
//
$(function() {
$("#contactForm").validate ({
rules: {
title:{
required: true,
},
fname: {
lettersonly:true,
required: true,
minlength: 2,
},
sname:{
required: true,
pattern: /^[a-zA-Z\-]+$/i,
},
han:{
required: true,
pattern: /^ZHA\d{6}/,
},
email:{
required: true,
email: true,
},
tnumber:{
required: false,
pattern: /^[0-9]\d{10}/
}
},
messages: {
title:{
required: "This field is required. Please select a title."
},
fname: {
required: "This field is required. Please enter your first name.",
lettersonly: "Please enter only letters." ,
minlength: "First name must be at least two characters long."
},
sname: {
required: "This field is required. Please enter a valid Surname.",
pattern: "Please enter a valid surname. Use only letters and if necessary, an hyphen (-).",
},
email:{
required: "This field is required. Please enter a valid email address.",
},
han:{
required: "This field is required. Please enter a valid Zedland Health Authority number.",
pattern: "Your ZHA number should contain the characters ZHA (case sensitive), followed by six digits.",
},
tnumber:{
pattern: "Please a valid UK telephone number."
},
},
},
)},
)
最佳答案
只需从第一个选项中删除“-1”值，这应该可以解决您的验证问题
<select name="title" id="title">
<option value="">Please select your Title</option>
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="master">Master</option>
</select>
关于javascript - 如何使用 jquery 验证所需的标题字段集？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51556749/