时间戳

首页 > 解决方案 > JS - 如何在文本为空且未勾选复选框时停止表单提交？

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

问题描述

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

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，我无法更改。任何帮助，将不胜感激。

标签： javascripthtmlforms

解决方案

我不认为你想使用,in 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>

推荐阅读