使用 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
}

Answer 2

请确保您在 select 中的默认值为 null。请参考 下面的代码会对你有所帮助。

<form>
<label>Please select a number to submit the form:</label>
<select id="select" required>
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="submit" value="submit"/>
</form>

Answer 3

诀窍是在您的下拉输入中包含一个默认的空白选项。如果没有空白选项，则选择第一个选项，因此所需的验证通过。

<select id="relationshipDropDown">
    <option selected value=''>-- Select an option --</option>
    <option value="father">Father</option>
    <option value="mother">Mother</option>
    <option value="sibling">Sibling</option>
</select>

下面的代码使下拉列表按预期需要

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

这里是 jsFiddle 示例，其中包含有效验证，或者您运行下面的代码 sn-p。

$('#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);
        $('#relationshipDropDown').prop("required", false);
    } else {
        $('#familyName').prop("required", true);
        $('#email').prop("required", true);
        $('#phoneNumber').prop("required", true);
        $('#givenName').prop("required", true);
        $('#relationshipDropDown').prop("required", true);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page.php">
  Given name:<br>
  <input type="text" id="givenName" name="givenName" value="">
  <br>
  Family name:<br>
  <input type="text" id="familyName" name="familyName" value="">
  <br>
  Email:<br>
  <input type="text" id="email" name="email" value="">
  <br>
  Phone:<br>
  <input type="text" id="phoneNumber" name="phoneNumber" value="">
  <br>
  <select id="relationshipDropDown">
    <option selected value=''>-- Select an option --</option>
    <option value="father">Father</option>
    <option value="mother">Mother</option>
    <option value="sibling">Sibling</option>
</select>
  <br><br>
  <input id="submitForm" type="submit" value="Submit">
</form>