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

我有一个包含3个必填字段和6个选项字段的HTML表单。如果这3个区域（街道，npa，地点）中的一个填满了，我如何实现这一点，强制用户填补这三个？奇怪的是，如果用户可以填写他的街道地址，但不是他的ZIP/NPA代码。我想不出我该怎么做。HTML表单 - 如果这3个字段中的一个填充，应填写所有字段

<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._%+-][email protected][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"/>

来源

2017-08-05 DanyDC

我做了@ 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; 
      } 
     } 
     }); 
    } 
    } 
}

来源

2017-08-07 08:45:39 DanyDC

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

您只需绑定<script>标记中的脚本并通过<body onload="doInputRequireGroups();">调用函数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; 
      } 
     } 
     }); 
    } 
    } 
}

来源

2017-08-05 09:04:29 Siphalor

正是我想 –

感谢队友，我会在尽快尝试，因为我可以，但它看起来像正是我需要的！ – DanyDC

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

回答

相关问题