JS - 如何在文本为空且未勾选复选框时停止表单提交？

Question

到目前为止，这是我的脚本。 目的是在文本框为空时不允许提交，

var chk = document.getElementsByName('termsChkbx')[0];
var btn = document.getElementsByName("submit")[0];
var fname = document.forms["bookingForm"]["forename"].value;
var sname = document.forms["bookingForm"]["surname"].value;
var cname = document.forms["bookingForm"]["companyName"].value;

document.getElementsByName('termsChkbx')[0].onclick = function() {
    textCol()
};

function textCol() {
    if (chk.checked) {
        document.getElementById("termsText").style.color = "black";
        document.getElementById("termsText").style.fontWeight = "normal";
        btn.disabled = false;

         if (fname == null || fname == "", sname == null || sname == "") {
         btn.disabled = true;

         }
    }
    else {
        document.getElementById("termsText").style.color = "red";
        document.getElementById("termsText").style.fontWeight = "bold";
        btn.disabled = true;

    }
}         

我知道第二个 if 语句中的逻辑有问题，但我无法弄清楚如何在勾选框时允许按下按钮，但在字段为空时不允许按下。

<p><input type="submit" name="submit" value="Book now!" disabled=""></p>

这是按钮的 HTML，我无法更改。 任何帮助，将不胜感激。

Answer 1

我不认为你想使用,在if (fname == null || fname == "", sname == null || sname == "") 你可以简化它：

 var chk = document.getElementsByName('termsChkbx')[0]; var btn = document.getElementsByName("submit")[0]; var fname = document.forms["bookingForm"]["forename"]; var sname = document.forms["bookingForm"]["surname"]; function validate() { if(fname.value == "" || sname.value == "" || !chk.checked) { btn.disabled = true } else { btn.disabled = false } } validate() chk.addEventListener("click", validate) fname.addEventListener("change", validate) sname.addEventListener("change", validate)

 <form name="bookingForm"> <input type="text" name="forename"> <input type="text" name="surname"> <input type="checkbox" name="termsChkbx"> <input type="submit" value="Submit" name="submit"> </form>