javascript - 如何使用 jquery 验证所需的 Title 字段集？

问题描述

我正在尝试验证带有标题（例如先生、夫人、女士..）的下拉菜单，并且我需要将其作为必填字段并在未选择标题时显示错误消息。

我能够通过在 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."
        },
    },

},



    )},
)

标签： javascripthtml

<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 验证所需的 Title 字段集？

问题描述

解决方案

推荐阅读