CODEWITHSUNDEEP
htmlvalidationinput
JL1
JL1

Reputation: 309

HTML5 Input Required Validation fails on Submit when javascript sets the value

Basically, I have two input controls a textbox and a checkbox. What I want to happen is when the checkbox is clicked, I want to set the value of the input. The javascript I have sets the default value however when I submit, the form fails validation for the input text to be required even though the text input has the value.

 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

Upvotes: 1

Views: 1210

Answers (1)

DarthCadeus
DarthCadeus

Reputation: 372

This is the code you have,

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>
When I ran it, I cannot reproduce the problem (it passes the validation normally), but I could see a few issues. I have modified you code to produce what I think might be a better solution.

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>

If you run it, fill in the input field manually, and submit, it will work like normal. If you don't fill in and don't check the box, the required validation will still come into effect. If you don't fill it and check the box, the text will become "NONE", and if the problem reemerges, then it will still submit, and the backend can process that.

In your original answer, you checked if the input field is empty before setting it to NONE, but if the user filled something in, and then checked the check box, what will happen? It would submit, but instead of getting NONE, you would get the user's input instead, although the checkbox is checked. So the best way is probably to save the user value, and restore it upon unchecking.

First of all, you probably want to check if the user clicked on the checkbox to check it or to uncheck it, because your script would set it the text field to "NONE" even if the user checked the checkbox, changed his mind, changed the text, and clicked on it to uncheck. Additionally, lh != null will not work, because lh is the element, not its value. You need to access its value attribute. Additionally, you might want to consider removing the required attribute from the element, setting it to empty, and disabling it when the user checks it. This prevents any issues if the user manually inputs "NONE" in the field but leaves the input box unchecked. After all, your request would send the state of the check box as well.

Upvotes: 1

Related Questions