Question

我有一个包含3个必填字段和6个可选字段的HTML表单。如果填写这3个字段（街道，地理位置，地点）中的一个，强制用户填写这三个字段，我该如何实现？如果用户可以填写他的街道地址而不是他的ZIP / NPA代码，那就很奇怪了。

我无法弄清楚我该怎么做。

<hr />
<h3>Required fields</h3>
<input type="text" name="firstname" placeholder="Pr&eacute;nom" required="required"/>
<input type="text" name="lastname" placeholder="Nom" required="required"/>
<input type="mail" name="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required="required"/>

<h3>Optional fields</h3>
<hr />
<input type="text" name="title" placeholder="Titre"/>
<input type="text" name="region" placeholder="R&eacute;gion"/>
<div> <!-- if one of these 3 fields (street, npa, locality) is filled, force the user to fill the three--> 
    <input type="text" name="street" placeholder="Rue/n&deg;"/>
    <div style="display: inline-block; width: 100%;">
        <input type="text" name="npa" placeholder="NPA" style="width: 48%; margin-right: 2%; float: left;"/>
        <input type="text" name="locality" placeholder="Localit&eacute;" style="width: 48%; margin-left: 2%;"/>
    </div>
</div>
<input type="text" value="+41 " name="phone" placeholder="T&eacute;l&eacute;phone"/>

Answer 1

我制作了一个JavaScript解决方案，因为这似乎是唯一的方法。 JSFiddle

您只需将脚本绑定到<script>代码中，然后通过doInputRequireGroups调用函数<body onload="doInputRequireGroups();">。

然后，您可以通过将input-require-group类添加到容器元素来对输入进行分组，就像您在JSFiddle中看到的那样。

这是JavaScript代码：

function doInputRequireGroups(){
  var groups = document.getElementsByClassName("input-require-group");
  for(var i=0; i < groups.length; i++){
     let inputs = groups[i].getElementsByTagName("input");
     for(var j=0; j < inputs.length; j++){
       inputs[j].style.color="1px solid green";
       inputs[j].addEventListener("keyup", function(){
         if(this.value==""){
           for(var k=0; k < inputs.length; k++){
             inputs[k].required=false;
           }
         } else {
            for(var k=0; k < inputs.length; k++){
              inputs[k].required=true;
            }
         }
       });
    }
  }
}

Answer 2

我对@Siphalor的回答做了一些修改，我找到了我需要的东西。以下是编辑后的脚本：

function doInputRequireGroups()
{
  var groups = document.getElementsByClassName("input-require-group");

  for(var i=0; i < groups.length; i++)
  {
     let inputs = groups[i].getElementsByTagName("input");

     for(var j=0; j < inputs.length; j++)
     {
       inputs[j].style.color="1px solid green";

       inputs[j].addEventListener("keyup", function()
       {
         //Only remove the required attribut if all the fields are empty.
         if(inputs[0].value=="" && inputs[1].value=="" && inputs[2].value=="")
         {
           for(var k=0; k < inputs.length; k++)
           {
             inputs[k].required=false;
           }
         }
         else
         {
            for(var k=0; k < inputs.length; k++)
            {
              inputs[k].required=true;
            }
         }
       });
    }
  }
}

HTML表单 - 如果填写了这3个字段中的一个，则应填写所有字段

2 个答案: