当 javascript 设置值时，HTML5 输入要求验证在提交时失败

Question

基本上，我有两个输入控件textbox 和checkbox。我想要发生的是当单击复选框时，我想设置输入的值。我设置的 javascript 设置了默认值，但是当我提交时，即使文本输入具有值，表单也无法验证所需的输入文本。

 function NoLienHolder() {
            var lh = document.getElementById('vehicleLienHolder');
            if (lh != null) {
                lh.value = "NONE";
            }
        }

<input name="vehicleLienHolder" id="vehicleLienHolder" required="required" placeholder="Enter Lien Holder" oninvalid="this.setCustomValidity('Please enter the Lien Holder or select no lien holder.')"
        oninput="this.setCustomValidity('')" /><input type="checkbox" title="No Lien Holder" onclick="NoLienHolder()" name="NoLienHolderCheckBox" id="NoLienHolderCheckBox" />No Lien Holder

Answer 1

这是你的代码，

function NoLienHolder() {
  var lh = document.getElementById('vehicleLienHolder');
  if (lh != null) {
    lh.value = "NONE";
  }
}

<form>
  <input name="vehicleLienHolder" id="vehicleLienHolder" required="required" placeholder="Enter Lien Holder" oninvalid="this.setCustomValidity('Please enter the Lien Holder or select no lien holder.')" oninput="this.setCustomValidity('')" />
  <input type="checkbox" title="No Lien Holder" onclick="NoLienHolder()" name="NoLienHolderCheckBox" id="NoLienHolderCheckBox" />No Lien Holder
  <input type="submit" value="Submit">
</form>

当我运行它时，我无法重现问题（它正常通过验证），但我可以看到一些问题。我已经修改了您的代码以产生我认为可能是更好的解决方案。

var original = "";
function NoLienHolder() {
  var lh = document.getElementById('vehicleLienHolder');
  var checkbox = document.getElementById("NoLienHolderCheckBox");
  if (checkbox.checked) {
    original = lh.value;
    document.getElementById('status').innerHTML = "Uncheck it to restore its original value";
    lh.value = "NONE";
    lh.setAttribute("disabled", "disabled");
    lh.removeAttribute("required");
  } else {
    lh.value = original;
    document.getElementById('status').innerHTML = "Check the Checkbox if there is no holder";
    lh.setAttribute("required", "required");
    lh.removeAttribute("disabled");
  }
}

<form>
  <input name="vehicleLienHolder" id="vehicleLienHolder" required="required" placeholder="Enter Lien Holder" oninvalid="this.setCustomValidity('Please enter the Lien Holder or select no lien holder.')" oninput="this.setCustomValidity('')" /> <input type="checkbox"
    title="No Lien Holder" onclick="NoLienHolder()" name="NoLienHolderCheckBox" id="NoLienHolderCheckBox" />No Lien Holder
  <input type="submit" value="Submit">
  <span id="status">Check the Checkbox if there is no holder</span>
</form>

如果你运行它，手动填写输入字段，然后提交，它会像往常一样工作。如果不填写也不勾选，required 验证仍然会生效。如果你不填写并勾选框，文本将变为“NONE”，如果问题再次出现，那么它仍然会提交，后端可以处理。

在您的原始答案中，您在将输入字段设置为 NONE 之前检查了输入字段是否为空，但是如果用户填写了一些内容，然后选中了复选框，会发生什么情况？它会提交，但不是得到 NONE，而是得到用户的输入，尽管复选框被选中。所以最好的方法可能是保存用户值，并在取消选中时恢复它。

首先，您可能想要检查用户是否单击了复选框以选中或取消选中它，因为您的脚本会将其文本字段设置为“NONE”，即使用户选中了复选框，更改了他的请注意，更改文本，然后单击以取消选中。此外， lh != null 将不起作用，因为 lh 是元素，而不是它的值。您需要访问其 value 属性。此外，您可能需要考虑从元素中删除所需的属性，将其设置为空，并在用户检查时禁用它。如果用户在字段中手动输入“NONE”但未选中输入框，这可以防止出现任何问题。毕竟，您的请求也会发送复选框的状态。