Question

我使用Bootstrap获得了一个HTML表单。在此表单上，我有一个选择列表（必填字段）。当用户选择选项＆＃34;其他＆＃34;从这个列表中，我有一个隐藏的文本输入字段（单行），然后显示给用户以提供更多详细信息。此文本输入仅在可见时才是必填字段 - 显示/隐藏它的javascript也会添加/删除＆＃34; required＆＃34;属性。

这几乎可以正常工作。如果我选择＆＃34;其他＆＃34;从下拉列表中，显示文本框，如果我没有在那里输入值，我会得到我期待的验证错误。问题是，如果我选择其他，显示文本字段，将焦点放在文本字段中然后选项卡（因此它显示验证错误消息）然后从选择列表中选择另一个值而不输入值文本域。它隐藏文本字段并删除＆＃34; required＆＃34;属性如预期。然后表单有效 - 如果我单击提交按钮，它将按预期提交。

问题似乎与css有关（可能来自Bootstrap验证？）。从选择列表中选择另一个值以隐藏文本字段后，提交按钮仍保留在＆＃34;无效＆＃34;国家，即灰色和＆＃34;不！＆＃34;当我将鼠标悬停在它上面时鼠标指针。如果我点击它，它会提交OK，这表示它正常工作但它看起来并不像，从用户的角度来看这并不理想。

在浏览器的开发者工具中查看它，我可以看到＆＃34;禁用＆＃34;在删除＆＃34; required＆＃34;之后，仍然会将类应用于提交按钮。尽管表单有效，但来自文本字段的属性。我可能只是将一些javascript放入上面显示的更改事件中，以便在隐藏此文本字段时删除该属性，但是一旦混合中存在其他字段就会出现问题，即使此字段有效也可能存在其他字段页面上的无效字段，要求提交按钮处于禁用状态。

HTML和javascript：

＆＃13;

   //add change event handler to TemplateName dropdown to show/hide textbox for "other" option
$("#TemplateName").change(function() {
    if ($("#TemplateName").val() == "Other") {
        $("#TemplateNameTextGroup").show("fast");
        $("#TemplateNameText").attr("required", true);
    } else {
        $("#TemplateNameText").removeAttr("required");
        $("#TemplateNameTextGroup").hide("fast");
    }
});

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>

<form id="MyForm" data-toggle="validator" action="Success.html">

  <!--DROPDOWN WITH "OTHER" FREE TEXT OPTION (MANDATORY)-->
  <div class="row">
    <div class="form-group col-xs-6">
      <label for="TemplateName">Template Name</label>
      <select class="form-control" id="TemplateName" data-error="This is a mandatory field" required>
        <option value="">Please select...</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
        <option value="Option 4">Option 4</option>
        <option value="Other">Other</option>
      </select>
      <div class="help-block with-errors"></div>
    </div>
    <div class="form-group col-xs-6" id="TemplateNameTextGroup" style="display:none;">
      <label for="TemplateNameText">Provide Details</label>
      <input type="text" class="form-control" id="TemplateNameText" data-error="Please provide details" />
      <div class="help-block with-errors"></div>
    </div>
    <div class="help-block with-errors"></div>
  </div>

  <button type="submit" id="submitButton" class="btn btn-default">Submit</button>

</form>

＆＃13;

Answer 1

如果您使用show（）＆amp;任何脚本语言中的hide（）方法，它将变为make style（CSS）changes.i.e。显示将为none或show。所以基本上会加载DOM元素，并且只会根据show或hide进行样式更改。而不是这样，不要在脚本中加载DOM元素。

Answer 2

我发现（有点）这个问题的解决方案。基本上，我在删除所需属性后立即明确触发文本框上的模糊事件。然后，这会强制验证再次检查该字段，然后它会注意到该字段不是必需的，因此空值是有效的，因此将提交按钮置于其有效状态。

更新了javascript：

＆＃13;

//add change event handler to TemplateName dropdown to show/hide textbox for "other" option
$("#TemplateName").change(function() {
  if ($("#TemplateName").val() == "Other") {
    $("#TemplateNameTextGroup").show("fast");
    $("#TemplateNameText").attr("required", true);
  } else {
    $("#TemplateNameText").removeAttr("required");
    $("#TemplateNameText").blur();
    $("#TemplateNameTextGroup").hide("fast");
  }
});

＆＃13;

表单有效时，HTML / Bootstrap验证表示无效

2 个答案: