set focus to validation summary error

Question

User-944424728 posted

Hello, how can I set focus when I click btncontinue. I tried keydown or click but seem did not work. Please advise. Thanks.

<asp:ValidationSummary  runat="server" ID="valSummary" />

$(document).ready(function () {  $('#<%=btnContinue.ClientID%>').keydown(function (event) {

$("#<%= valSummary.ClientId %>").focus();

         });           

in browser code:

<input type="submit" name="ctl00$Main_content$btnContinue" value="Continue" onclick="continue_click();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$Main_content$btnContinue&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_Main_content_btnContinue" class="formbutt">

Answer 1

User288213138 posted

Hi  aspvbnet,

Asp:ValidationSummary would render validation messages with div and ul, and div can not get focus.

So you have to put it into edit mode. then prevent user from entering text.

The code:

<script>
        $(document).ready(function () {
            $('#<%=btnContinue.ClientID%>').click(function (event) {
                event.preventDefault();
                $("#<%= valSummary.ClientID %>").attr("contentEditable", true);
                
                $("#<%= valSummary.ClientID %>").focus();
                
            })
            $("#<%= valSummary.ClientID %>").on("keydown", function (e) {

                e.preventDefault();

            });
        })
    </script>
<div>           
           Name:<asp:TextBox id="txt_name" runat="server"/>
            <asp:RequiredFieldValidator ControlToValidate="txt_name" runat="server" /><br /><br />
            <asp:Button ID="btnContinue" Text="Continue" runat="server" />                   
            <br />
            <asp:ValidationSummary ID="valSummary" HeaderText="You must enter a value in the following fields:" runat="server" />       
        </div>

The result:

Best regards,

Sam

Answer 2

User-2054057000 posted

You can use .focus() method:

<asp:ValidationSummary ID="valSummary" runat="server" />

<script>
    $(document).ready(function () {
        $("#valSummary").focus();
    })
</script>