In my application you fill in a number in an input field that gets validated on the client side by different validators. I have an external JS-file with code that puts the input field in focus and selects the previous entered number. I’ve also have included “defaultbutton” in my form tag so that typing a new number and submitting the form is easy and goes fast (just type again and press ENTER)
Everything works fine except one thing. When typing a number that’s out of the allowed range or leaving the input field empty the error message is shown only if clicking the submit button with the mouse button. If clicking with ENTER, the “*” next to the input field is shown, but not the error message.
I hope the code below is enough to be able to see what’s wrong.
Thanks in advance.
<form id="form1" runat="server" defaultbutton="btnCheckNr">
...
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
<asp:TextBox ID="inputBox" runat="server" Height="22px" Width="75px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="inputBox" Display="Dynamic"
ErrorMessage="Type a number between 1 and 100." SetFocusOnError="True">*</asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="Skriv ett heltal mellan 1 och 100." Text="*"
MaximumValue="100" MinimumValue="1" Type="Integer" ControlToValidate="inputBox" Display="Dynamic"></asp:RangeValidator>
<asp:Button ID="btnCheckNr" runat="server" Text="Skicka gissning" onclick="btnCheckNr_Click" />
...
</form>
JS:
var Capsule = {
init: function() {
var input = $('#inputBox');
if (!input.is(":disabled")) {
input.focus();
input.select();
}
}
}
window.onload = Capsule.init;
Correct me if I am wrong but it looks like your range validator needs to be modified as well as your required field validator.
Shouldnt it be like this?