While using Google Chrome, the function is working fine i.e all error messages are speaking out when button triggered as I given, but when using Internet Explorer or Firefox it starts validation from downside and that too one by one, but it is working fine with Google Chrome.
I have created two sample textboxes and given the required filed validator and assigned a function to speak error messages.
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script>
function perform() {
if (document.getElementById('user').style.display == "inline") {
responsiveVoice.speak("" + document.getElementById('user').innerHTML + "");
}
if (document.getElementById('pass').style.display == "inline") {
responsiveVoice.speak("" + document.getElementById('pass').innerHTML + "");
}
}
</script>
<body>
<form id="form1" runat="server">
<table class="auto-style1">
<tr>
<td class="auto-style2">Username</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="user" runat="server" ControlToValidate="TextBox1" ErrorMessage="Enter Username" Display="Dynamic" ForeColor="#FF3300"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style2">Password</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="pass" runat="server" ControlToValidate="TextBox2" ErrorMessage="enter password" Display="Dynamic" ForeColor="#FF3300"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClientClick="perform();"/>
</td>
</tr>
It should work fine with Internet Explorer, that is, all error messages should be spoke at the same time or at least validate from upside to down.