After reviewing about 30 examples and testing them out, I have decided to post my question since none of the examples seem to be working for me.
I am not an expert in JavaScript, but I assumed that validating a simple radio button should not be too difficult.
I am attempting to display a nice CSS error message when the form is incorrect. However, for some reason, the radio button error message appears for less than a second and then disappears. The other errors (non-radio) seem to work fine. For this question, I will only post the code related to the radio button part.
The 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>
The validation block:
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 validations for text, email, phone, etc. that are working. All starting with an if statement and returning false with a div displaying errors.
return( true );
}
Here are the approaches I tried that did not work - the error message appears for less than a second when it should not disappear:
1# Based on a solution I found:
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# Based on the predefined values of the radio buttons:
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# Based on the array of the radio buttons:
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';
}
Regardless of the approach, the error message displays for 0.5 seconds and then disappears. I even tried removing the display = 'none' in the else statement, but the issue persists.