如果选中了相邻的复选框，则输入字段验证 [英] Input Field Validation If Adjoining Checkbox Is Checked

问题描述

我有一个具有多个值的表格，用于公共字段服务。我创建了一个选项其他供选择。我想用其他选项旁边的javascript输入字段进行验证。代码如下

< label   =   service style =   font-size：15px; vertical-align：top;>您想要的服务* < /   label  >  
 
< input type =   复选框 name =   service []  id =  完成新设置  value  =  完成新设置>完成 new  设置 up< br> 
< input type =  复选框 name =   service [] id =  标准化 值 =  标准化>标准化与LT峰; br> 
< input type =  复选框 name =   service [] id =  培训 值 =  培训>培训< br> 
< input type =  复选框 name =   service [] id =  故障排除 值 =  故障排除>故障排除< br> 
< input type =  复选框 name =   service [] id =  添加新技术  value  =  添加新技术>添加新技术< br> 
< input type =  复选框 name =   service [] id =  实践培训  value  =  实践培训>实践培训< br> 
< input type =  复选框 name =   service [] id =  研讨会和工作坊  value  =  研讨会和研讨会>研讨会&车间<峰; br> 
< input type =  复选框 name =   service [] id =  文档准备  value  =  文件的准备>文件的准备< br> 
< input type =  复选框 name =   service [] id =  其他önclick=   enable_text（this.checked） 值 =  其他>其他
 
< input type =   text name =   other_text>< br> 

对于其他选项，如果选中其他选项，则输入文本字段变为启用。

用于启用输入字段的工作javascript为：

 < script  >  
 function enable_text（sta tus）
 {
 status =！status; 
 document.formname.other_text.disabled = status; 
} 
 < /   script  >  

javascript用于选择至少一项服务正在运行，它如下：

 < script  >  
  var  chks = document.getElementsByName（& amp;＃39; service []& amp;＃39;）; 
  var  hasChecked =  false ; 
  for （ var  i =  0 ; i& amp; lt; chks.length; i ++）
 {
  if （chks [i]。已选中）
 {
 hasChecked =  true ; 
  break ; 
} 
} 
 如果（hasChecked ==  false ）
 {
 alert（& amp; quot; Please Select At Atast One Service。& amp; quot;）; 
  return   false ; 
} 
 < /   script  >  

但我没有得到如何验证输入字段复选框中的其他选项是已选中。

解决方案

HTML

 <  输入    type   = 复选框    name   = 其他     önclick  =   enable_text（this.checked）    /  >  
 <  输入   类型  =  text    id   =  other_text    /  >  

JavaScript

  function  enable_text（status）
 {
  document  .getElementById（  other_text）。disabled =！status ; 
} 

DEMO [ ^ ]



编辑

  if （ document  .getElementById（ 其他）。checked&& isBlank（ document .getElementsByName('  other_text'）。value））{
 alert（< span class =code-string> 您的留言.........）; 
  return   false ; 
} 

使用以下函数检查空白输入

 函数 isBlank（str）{
  return （！str || / ^ \s * 

/测试（STR））;
}

< html>



< head>



< / head>

< body>

< label for =servicestyle =font -size：15px; vertical-align：top;>服务你想要*< / label>



< input type =checkboxname = service []id =完成新设置value =完成新设置>完成新设置< br>

< input type =checkboxname =service [ ]id =标准化值=标准化>标准化< br>

< input type =checkboxname =service []id =Trainingvalue =培训>培训< br>

< input type =checkboxname =service []id =Trouble shootingvalue =Trouble shooting>故障排除< br> ;

< input type =checkboxname =service []id =添加新技术value =添加新技术>添加新技术< br>

< input type =checkboxname =ser副[]id =动手培训值=实践培训>实践培训< br>

< input type =checkboxname =service []id =研讨会&研讨会value =研讨会&研讨会>研讨会和研讨会< br>

< input type =checkboxname =service []id =文件的准备value =文件的准备>文件的准备工作< br>

< input type =checkboxid =othername =otherid =Othervalue =other> Other



< input type =textid =other_textname =other_text>< br>





< input type =buttonvalue =点击此处onclick =javascript：return validateForm（）>

< / body>

< html>



< script>

function validateForm（）

{

var chks = document.getElementsByName（'service []'）;

var other = document.getElementsByName（'other'）;

var hasChecked = false;

for（var i = 0; i< chks.length; i ++）

{

if（ chks [i] .checked）

{

hasChecked = true;

break;

}

}

if（（！hasChecked）&& ！（document.getElementById（'other'）。已选中））

{

alert（请查看任何一个）;

} else if（document.getElementById（'other'）。checked）

{



if（document.getElementById（'other_text'） .value ==''）{

alert（输入其他详细信息）;

document.getElementById（'other_text'）。focus（）;

返回false;

}



}



返回true;

}

< / script>













Hai，





尝试此代码

I have a Form With Multiple Values For A Common Field "service". I have created an option "Other" For selection. And I want to validate with javascript input field next to "other" option. Code is as follows

<label for="service" style="font-size:15px; vertical-align:top;">Service You Want*</label>

<input type="checkbox" name="service[]" id="Complete new set up " value="Complete new set up ">Complete new set up<br>
<input type="checkbox" name="service[]" id="Standardization" value="Standardization ">Standardization<br>
<input type="checkbox" name="service[]" id="Training" value="Training">Training <br>
<input type="checkbox" name="service[]" id="Trouble shooting " value="Trouble shooting ">Trouble shooting <br>
<input type="checkbox" name="service[]" id="Addition of new techniques" value="Addition of new techniques">Addition of new techniques<br>
<input type="checkbox" name="service[]" id="Hands on training" value="Hands on training">Hands on training<br>
<input type="checkbox" name="service[]" id="Seminars & Workshops" value="Seminars & Workshops">Seminars & Workshops<br>
<input type="checkbox" name="service[]" id="Preparations of documents" value="Preparations of documents ">Preparations of documents <br>
<input type="checkbox" name="service[]" id="Other"  önclick="enable_text(this.checked)"  value="other" >Other

<input type="text" name="other_text"><br>

For "Other" option, Input Text Field get Enabled if "other" options is checked.
working javascript used to enable input field is :

<script>
    function enable_text(status)
    {
        status=!status;
        document.formname.other_text.disabled = status;
    }
</script>

javascript used To select atleast one service is working and it is as follows:

<script>
    var chks = document.getElementsByName(&amp;#39;service[]&amp;#39;);
    var hasChecked = false;
    for (var i = 0; i &amp;lt; chks.length; i++)
    {
        if (chks[i].checked)
        {
            hasChecked = true;
            break;
        }
    }
    if (hasChecked == false)
    {
        alert(&amp;quot;Please Select At Least One Service.&amp;quot;);
        return false;
    }
</script>

But I am not getting how to validate input field if "Other" option from checkboxes is Checked.

解决方案

HTML

<input type="checkbox" name="others"  önclick="enable_text(this.checked)" />
<input type="text" id="other_text" />

JavaScript

function enable_text(status)
{
  document.getElementById("other_text").disabled = !status;
}

DEMO[^]

EDIT

if (document.getElementById("Other").checked && isBlank(document.getElementsByName('other_text').value)) {
    alert("your message......... ");
    return false;
}

use below function to check blank input

function isBlank(str) {
    return (!str || /^\s*

/.test(str)); }

<html>

<head>

</head>
<body>
<label for="service" style="font-size:15px; vertical-align:top;">Service You Want*</label>

<input type="checkbox" name="service[]" id="Complete new set up " value="Complete new set up ">Complete new set up<br>
<input type="checkbox" name="service[]" id="Standardization" value="Standardization ">Standardization<br>
<input type="checkbox" name="service[]" id="Training" value="Training">Training <br>
<input type="checkbox" name="service[]" id="Trouble shooting " value="Trouble shooting ">Trouble shooting <br>
<input type="checkbox" name="service[]" id="Addition of new techniques" value="Addition of new techniques">Addition of new techniques<br>
<input type="checkbox" name="service[]" id="Hands on training" value="Hands on training">Hands on training<br>
<input type="checkbox" name="service[]" id="Seminars & Workshops" value="Seminars & Workshops">Seminars & Workshops<br>
<input type="checkbox" name="service[]" id="Preparations of documents" value="Preparations of documents ">Preparations of documents <br>
<input type="checkbox" id="other" name="other" id="Other" value="other" >Other

<input type="text" id="other_text" name="other_text"><br>


<input type="button" value="Click Here" onclick="javascript:return validateForm()">
</body>
<html>

<script>
function validateForm( )
{
var chks = document.getElementsByName('service[]');
var other = document.getElementsByName('other');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if((!hasChecked)&& !(document.getElementById('other').checked))
{
alert("Please chaek any of one");
} else if(document.getElementById('other').checked)
{

if (document.getElementById('other_text').value == '') {
alert("Enter the other details ");
document.getElementById('other_text').focus();
return false;
}

}

return true;
}
</script>






Hai,


Try this Code

这篇关于如果选中了相邻的复选框，则输入字段验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！