Javascript单选按钮验证错误弹出不到一秒钟，但不应消失

Javascript radio button validation error pops up for less than a second while it should not disappear

本文关键字：一秒钟 消失 Javascript 验证 错误 单选按钮      更新时间：2024-01-31

好吧，在阅读了大约30个例子并测试了它们之后，我终于决定发布我的问题，因为所有的例子都不适合我。

所以我不是javascript专家，但验证一个简单的单选按钮应该不会太难，至少我是这么想的。

当表单不正确时，我试图输出一个漂亮的css错误处理。不过，出于某种原因，我的单选按钮错误弹出不到一秒钟，然后又消失了。不过，其他错误（非无线电）确实有效。对于这个问题，我只发布单选按钮部分的代码。

HTML：

<div align="left"><form name="myForm" method="post" style="display:inline" onsubmit="return(validate());"> 
<div class="radio">
<input type="radio" class="radio" name="automatisering" value="1">Automatisering
<input type="radio" class="radio" name="automatisering" value="2">Software
<div id="Fout" style="display:none" color="white"></div>
</div>
input type="submit" value="Submit" />   
</form></div>

验证块：

function validate()
{
    if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true) 
   {
     document.getElementById("Fout").style.display = 'inherit';
     document.getElementById("Fout").setAttribute("title", "Some error message");    
     document.myForm.automatisering.focus() ;
     return false;
   } 
   else
   {
     document.getElementById("Fout").style.display = 'none';
   }
~~~~~Other validation with text, email, phone, etc. that DOES work. All starting with the if and returning false with div displaying like the radio example.
return( true );
}

我尝试过的事情（但没有成功-输出错误不到一秒钟，而它不应该消失）：

1#基于我发现的一些幻想

var elem=document.forms['myForm'].elements['automatisering'];
    len=elem.length-1;
    chkvalue='';
    for(i=0; i<=len; i++)
    {
        if(elem[i].checked)chkvalue=elem[i].value;  
    }
    if(chkvalue=='')
    {
    document.getElementById("Fout").style.display = 'inherit';
     document.getElementById("Fout").setAttribute("title", "Some error message!");   
     document.myForm.automatisering.focus() ;
    return false;
    }
    document.getElementById("Fout").style.display = 'none';

2#基于无线电的值（手动给定）

if(document.myForm.automatisering.value != 1 && document.myForm.automatisering.value != 2) 
   {
     document.getElementById("Fout").style.display = 'inherit';
     document.getElementById("Fout").setAttribute("title", "Some error message!");   
     document.myForm.automatisering.focus() ;
     return false;
   } 
   else
   {
     document.getElementById("Fout").style.display = 'none';
   }

3#基于无线电阵列

if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true) 
   {
     document.getElementById("Fout").style.display = 'inherit';
     document.getElementById("Fout").setAttribute("title", "Some error message!");   
     document.myForm.automatisering.focus() ;
     return false;
   } 
   else
   {
     document.getElementById("Fout").style.display = 'none';
   }

我尝试过的所有事情的结果都是一样的，我在0.5秒内收到错误消息（div），它立即消失。还尝试删除else上的display='none'，但这导致了相同的问题。

此代码无效：

document.myForm.automatisering.focus() ;

document.myForm.automaterising是NodeList，您只能关注特定的DOM元素。当它从该语句中得到错误时，它从不执行return false，因此表单被提交。

尝试将其更改为：

document.myForm.automatisering[0].focus() ;

它确实对我有效。我修复了HTML中的语法错误（input错过了它的开头标记）http://codepen.io/anon/pen/PwRXbr

编辑：

问题是，当您返回false时，onsubmit方法显然不会阻止<form>的提交。您可以创建一个按钮来检查值，然后调用document.myForm.submit()。以下是一个示例：http://codepen.io/anon/pen/ZYxVJy

以下是工作代码：HTML

<div align="left">
  <form name="myForm" action="#" style="display:inline" onsubmit="return(validate());"> 
    <div class="radio">
      <input type="radio" class="radio" name="automatisering" value="1">Automatisering
      <input type="radio" class="radio" name="automatisering" value="2">Software
      <div id="Fout" style="display:none" color="white">bla</div>
    </div>
    <input type="submit" value="Submit" />   
  </form>
</div>

JavaScript

function validate()
{
    if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
   {
     document.getElementById("Fout").style.display = 'block';
     document.getElementById("Fout").setAttribute("title", "Some error message");
     document.myForm.automatisering.focus() ;
     return false;
   } 
   else
   {
     document.getElementById("Fout").style.display = 'none';
   }
return true;
}
相关文章：