Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Brand3000's avatar

Forms, scroll to the first error

I use useForm and I want to scroll a user to the first error if it happens. Now, I set id for each div wrapper like so:

                        <div id="agency_section" class="input-wrapper">
                            <div v-if="form.errors.agency" class="rel">
                                <div class="error"><b></b>{{ form.errors.agency }}</div>
                            </div>
                            <input v-model="form.agency" required type="text">
                        </div>

and onError perform the next scrolling:

        onError: (result) => {
            window.scroll({
                top: document.getElementById(Object.keys(result)[0] + '_section').getBoundingClientRect().top + window.scrollY - 30,
                behavior: "smooth"
            });
        },

but I don't want to set id to each wrapper. I believe there's some solution in Inertia or Vue. Could someone help me with this fin-tune, please?

0 likes
9 replies
MohamedTammam's avatar

Using template refs

const errorRefs = ref([]);

onError = () => {
	if(errorRefs.value.length)
		errorRefs.value[0].scrollIntoView({behavior: 'smooth'});
};

<div v-if="form.errors.agency" class="rel" v-ref="errorRefs">
	<div class="error"><b></b>{{ form.errors.agency }}</div>
</div>
Brand3000's avatar

@MohamedTammam It's ok, but I seek to reduce my efforts. My thought is that: as each field is already reactive, there should be a way to work with that without adding extra code. I don't need to have a reference to the wrapper div. It'd be ok to refer to the field (which is reactive) inside the div in my scenario.

Brand3000's avatar

@MohamedTammam It's the same effort as adding id to each div. I don't mind about your approach, but as I explained there should be some approach as all the fields are already reactive.

Beiri's avatar

@brand3000, have you tried using .focus() on the input?

input.value.focus();

Of course, you would have to focus on the correct input with the error. This is just a simple example.

Beiri's avatar

@Brand3000 In that case, you could use .scrollIntoView({ behavior: 'smooth' }).

input.value.scrollIntoView({ behavior: 'smooth' });

I have a small example with vanilla JS here if you want to see: https://jsfiddle.net/0tvg51qj/

If you need any more adjustments, feel free to let me know!

Brand3000's avatar

@Beiri Yep, but how can I select an element? In the Vue component it's set as such:

<input v-model="form.agency" type="text">
Beiri's avatar

@Brand3000 Sorry, I only just saw that you don’t want to add either a ref or an id on the input. In this case, I don’t know of a solution. To my knowledge, v-model only binds the value, and we can’t call functions on it like .focus() or .scrollIntoView(). Unfortunately, you would need to either use an id or a ref on the element.

Please or to participate in this conversation.