选中复选框时表单验证空字段答案

【问题标题】：Form validation empty field when checkbox is checked选中复选框时表单验证空字段
【发布时间】：2015-04-15 10:41:44
【问题描述】：

我正在尝试在表单提交之前添加验证。还有一个替代输入字段，我们称之为“可选”，并且有复选框“Checkbox1”、“Checkbox2”、“Checkbox3”。当用户从这个复选框中选择一个时，他必须填写输入“可选”，如果它是空的，那么他不能提交表单并得到一些带有信息的弹出警报来填写这个。

我有这样的事情：

<script>
function validateForm() {
    var x = document.forms["form"]["nrumowy"].value;
    if (x == null || x == "") {
        alert("Numer umowy musi zostać uzupełniony.");
        return false;
    }
}
</script>

但是这个输入字段“nrumowy”必须在所有情况下都填写，所以一切正常，现在我想添加类似的东西，但只有当“Checkbox1”、“Checkbox2”、“Checkbox3”之一被选中时。

【问题讨论】：

请出示html代码以解决问题。
那你为什么不为你想要的添加条件呢？
@Imran 我是 JS 的新手，我不知道如何添加条件以使其正常工作。

标签： javascript php jquery html forms

【解决方案1】：

以下代码将在填写表单时立即运行。

jQuery 代码

<script>
function validateForm() {
    var x = document.forms["form"]["nrumowy"].value;
    if (x == null || x == "") {
        alert("Numer umowy musi zostać uzupełniony.");
        return false;
    }
    var op = document.forms["form"]["optional"].value;
    if ($("input[type=checkbox]:checked").length === 0 && op==""){
        alert("you must fill Optional field");
        return false;
    }
}
</script>

【讨论】：

那是禁用该输入字段，我不想禁用此输入，我想在有人选中指定复选框时添加警报，当他单击提交表单时，他会收到警报“您必须填写可选字段”。
我已根据您的要求更新了我的答案。您可以进一步定制它以适应您的 HTML。
如果对您有帮助，请批准@user3180931

【解决方案2】：

如果您想添加类似的内容，但仅在选中“Checkbox1”、“Checkbox2”、“Checkbox3”之一时。然后看看下面的代码对你有没有帮助。

function validateForm() {
  
  if(document.getElementById("Checkbox1").checked  ||
     document.getElementById("Checkbox2").checked  ||
     document.getElementById("Checkbox3").checked  ||
     {
    
    var x = document.forms["form"]["nrumowy"].value;
    if (x == null || x == "") {
        alert("Numer umowy musi zostać uzupełniony.");
        return false;
    }
     
     }
}

【讨论】：

【解决方案3】：

您应该在此之前简单地获取这些复选框的值，如果其中一个没有被选中，则退出该函数。

function validateForm() {
    var frm = document.forms["form"];
    if (!frm["Checkbox1"].checked && !frm["Checkbox2"].checked && !frm["Checkbox3"].checked) return;

    var x = frm["nrumowy"].value;
    if (x == null || x == "") {
        alert("Numer umowy musi zostać uzupełniony.");
        return false;
    }
}

【讨论】：

就是这样！但是警报仅在选中这三个复选框时才有效操作符“||”表示“或”，所以我不知道在选中此复选框之一时如何使警报也起作用？
不是&&。或查看 Sameer Sawant 的回答。

【解决方案4】：

好的，谢谢你的回答，我现在知道了：

<script>
function validateForm() {
    var frm = document.forms["form"];
    if (!frm["check_list1"].checked && !frm["check_list2"].checked && !frm["check_list3"].checked) return;

    var x = frm["tematyka"].value;
    if (x == null || x == "") {
        alert("Tematyka artykułu musi zostać uzupełniona.");
        return false;
    }


}
</script>
<script>
function validateForm2() {
var x2 = document.forms["form"]["nrumowy"].value;
    if (x2 == null || x2 == "") {
        alert("Numer umowy musi zostać uzupełniony.");
        return false;
    }
}
</script>

HTML：

<form name="form" method="POST" action="preview.php" onsubmit="return (validateForm() & validateForm2());">

并且警报有效，但是在用户单击“确定”后，他会转到 preview.php 页面。当只有一个 onsubmit 函数时，这很好用，但是当我尝试将这两个函数结合起来时，就会出现一些错误。

【讨论】：