CODEWITHSUNDEEP
javascriptjquery
rumi
rumi

Reputation: 3298

Jquery focus not working / scrolling

I m using the following jquery script to pick a span having a class and focus it

  <script type="text/javascript">
    $(document).ready(function () {
        $('span').each(function () {
            if ($(this).hasClass('field-validation-error')) {
                $(this).focus();
                $(this).addClass('hello');
            }
        });
    });
</script>

For some reasons the focus won't scroll to the span with the class 'field-validation-error' though it does add the class hello to the element.

The section of the html where this span element reside is as belwo

<section id="orderreason">

    <div class="orderrow backgrounddot">
        <ul>
            <li class="widenormal">Please tell us the purpose of your request <span class="asterick">*</span><br>
                (this information is used for statistical purposes only)</li>
        </ul>
        <br>
        <p>Please tick any that apply:</p>
            <div class="checkboxrow">
                <input type="checkbox" value="1" name="orderreason"><label>Patient care</label>
            </div>
            <div class="checkboxrow">
                <input type="checkbox" value="2" name="orderreason"><label>Health improvement</label>
            </div>
            <div class="checkboxrow">
                <input type="checkbox" value="3" name="orderreason"><label>Professional development</label>
            </div>
            <div class="checkboxrow">
                <input type="checkbox" value="4" name="orderreason"><label>Personal development</label>
            </div>
            <div class="checkboxrow">
                <input type="checkbox" value="5" name="orderreason"><label>Management/service improvement</label>
            </div>
            <div class="checkboxrow">
                <input type="checkbox" value="6" name="orderreason"><label>Research</label>
            </div>
            <p>Other:</p>


        <span data-valmsg-replace="true" data-valmsg-for="orderreason" class="field-validation-error">Please choose a reason or enter other text</span>
    </div>
</section>

Upvotes: 2

Views: 2711

Answers (1)

srquinn
srquinn

Reputation: 10481

You can focus on non-input elements if you give your HTML a tabindex attribute like so:

<span tabindex="-1"></span>

The -1 value makes it so that the element can't be tabbed by the user, but you can programmatically focus it with el.focus()

Aside

In your implementation, I assume you are creating validation errors. If the validation error occurs next to the input field, why not focus the input field instead of the span? This will have the added benefit of putting the user's cursor where it needs to be to fix the validation issue and deliver an overall better UX.

Upvotes: 4

Related Questions