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

Question

好吧，在阅读了大约 30 个示例并对其进行了测试之后，我终于决定 post 我的问题，因为所有示例都不适合我。

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

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

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#根据radio的

的数值（手动给定）

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#基于radio的数组

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';
   }

我尝试过的所有方法都产生相同的结果，我收到错误消息 (div) 0.5 秒，它立即消失。还尝试在 else 上删除 display = 'none' 但这会导致同样的问题。

Answer 1

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

编辑：

问题是当您 return 为 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;
}

Answer 2

此代码无效：

document.myForm.automatisering.focus() ;

document.myForm.automaterising是一个NodeList，你只能关注一个特定的DOM元素。当它从这个语句中得到一个错误时，它永远不会执行 return false，所以表单被提交。

尝试将其更改为：

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

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

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

html

javascript

css

forms

validation