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个具有有效验证的示例，或者您运行下面的代码段。

$('#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>

使用jQuery

3 个答案: