jquery - 使用 jQuery 使选择下拉菜单成为必需

Question

我有一个包含所有可选部分的表单。但是，如果您在任何输入中键入任何内容，JQuery 会生成所有必需的输入(因此您可以填写整个内容，或者如果您没有要添加的任何内容，则根本不填写任何内容)。

效果很好，看起来像这样:

$('#submitForm').click(function () {
    givenNameVal = $('#givenName').val();
    familyNameVal = $('#familyName').val();
    emailVal = $('#email').val();
    phoneVal = $('#phoneNumber').val();
    if (givenNameVal == "" && familyNameVal == "" && emailVal == "" && phoneVal == "") {
        $('#familyName').prop("required", false);
        $('#email').prop("required", false);
        $('#phoneNumber').prop("required", false);
        $('#givenName').prop("required", false);
    } else {
        $('#familyName').prop("required", true);
        $('#email').prop("required", true);
        $('#phoneNumber').prop("required", true);
        $('#givenName').prop("required", true);
    }
});

(我知道我可以让代码看起来更干净，一旦我有一个完整的解决方案就会这样做)

我遇到的问题是，我还有一个选择下拉列表，无法让我将其设为必需。我都试过了

    $('#relationshipDropDown').prop("required", true);
    $('#relationshipDropDown').attr("required", true);

而且都不起作用。我试过从一开始就要求它，然后试图在事后拿走所需的标签，但它不起作用。

想法？

对于那些想要更多信息的人来说，不必要的背景故事: 该表格供人们将其他实体添加到他们的“保险”计划中。绝对不需要他们添加任何东西，但是如果他们想要添加一些东西，我们需要所有的信息。实际上还有很多我没有添加的代码(地址等)。下拉关系是“与计划所有者的关系”，并且是必需的。

此外，下拉菜单有几个隐藏的输入，如果选择了该选项(即，如果选择“其他”，则会显示隐藏的输入，或者如果选择“培训机构”，则会显示合作伙伴机构列表)出现)。这就是为什么它必须是下拉列表或诸如此类的东西而不仅仅是常规输入框的原因。

谢谢!

编辑:在我开始修改我的代码之前，这里是下拉菜单的代码

<div class="input-group  mb-3 col-md-4 col-sm-12">
<select class="form-control" name="relationshipDropDown" id="relationshipDropDown">
    <option value="0" hidden>Relationship to Entity</option>
    <option value="1">Dive Boat</option>
    <option value="2"> Training Agency</option>
    <option value="3">Educational Institutions</option>
    <option value="4">Government Entity</option>
    <option value="5">Hotel</option>
    <option value="6">Marina</option>
    <option value="7">Motel</option>
    <option value="8">Pool/Facility Owner</option>
    <option value="9">Resort</option>
    <option value="10">Resort Dive Operator</option>
    <option value="11">Retailer</option>
    <option value="13">Other</option>
</select>

Answer 1

如果没有你的 HTML，我不知道你是否已经做过类似的事情，但这是过去对我有用的方法。

将选择中的第一个选项设置为:

<option value="">Choose One:</option>

然后，在您的 $('#submitForm').click(function () 中，您可以检查它是否仍然是控件的选定值:

let rdd = $('#relationshipDropDown').val();
if (rdd == ""){
    //Send user back to Go
}