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.
