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”，但未选中输入框，则可以防止出现任何问题。毕竟，您的请求也将发送复选框的状态。

当javascript设置值时，HTML5输入所需的验证在Submit上失败

1 个答案: