I have a small big problem, I have a big form made up of small multiple reusable small forms that I use on other forms. The problem is If I fill in some information in any field and hit tab or select any field to insert data, the browser automatically moves to the top of the form. This action is random and not specific to any field. Any help would be appreciated. I am using EXTJS 6
The problem of you form "autoscroll" is probably caused by validations of fields, i had the same problem using a form with a long scroll.
If you focus a field that can't be blank, and after you scroll down and focus an other field. Your focus will scroll you up because the validation is on blur.
Try to disable on all your fields this property setting it to false. And use a
form.isValid()
to validate your form.
Related
can anyone please help me, with my upload form code, for some reason my onChange function on the other inputs prevent you from adding images first before filling in the other fields, if you do it automatically submits the form. This is not a working version, but it is the full code: https://codesandbox.io/s/reverent-hugle-rsqqx
I'm not referring to the splitURL message it shows, if you fill out each of the text fields and then add the images, it's fine.
It doesn't submit, which allows the user to click the submit button.
If you add images first and then fill out just one of the text fields the form submits automatically.
I do not want this, I am designing a page where I would like to have the option to add the images for upload before filling out the rest of the form.
The only thing I can pinpoint it down to is the onChange function, if i remove that from one of the inputs I can fill out the input after adding images.
found the problem, the library "react-filepond" main element "FilePond" is specting an array of objects in the "files" property, so to fix the problem you just do the following:
// Add the spread operator in the items array too.
setPosterCollection([...posterCollection, ...items]);
This will fix the error and allow the user to fill the form in any order as he/she wish to.
In my form, the user can toggle the visibility of certain form elements using Knockout in order to save space. If the elements are visible and the user has not filled out the required fields, when they press the save button, HTML5 will notify the user of the required fields. However, when the elements are hidden, the save silently fails in that pressing the button does nothing.
The only indication to the user that something is wrong is that the save button does not respond. Of course in the console it has the familiar message 'An invalid form control is not focusable'.
Have you dealt this with issue before? How did you address it? I don't want to take away the required attribute. I suppose that one solution could be to validate with JavaScript for those types of fields instead of HTML5. Suggestions are appreciated.
Similar question:
An invalid form control with name='' is not focusable
use form submit instead of read value from selector. because HTML5 required filed will work if form get submitted.
I'm working on a form that have several fields with user's information (like his address) and, in the same form, several checkboxes and radio buttons. I want to keep autofill on, but only for the text fields. The radios and checkboxes all have custom events that trigger some ajaxes to update the page summaries and some other things.
Problem is: I did put autocomplete="off" on all fields I don't want autofill to mess up.. and that does work. But on chrome, when you have an autofilled a form, a "clear form" option shows up when you double click any field that is part of the autofilled form.
This clear form triggers a reset on the form object but this reset just don't fire any event. And it clears the whole form, even the radios and checkboxes. This breaks the functionality of my form because the custom events on the radios and checkboxes are not triggered.
The only solution I could think was to, using javascript, try to cache the current selections on the fields and keep comparing using a interval function... but that looks like a lame solution to me... it is kind of heavy and not very intuitive for other people to maintain this code. Does anyone know if this is a chrome bug or if there is any secret event I should be listening to, instead of "reset"?
Thank you
In my application I have three input fields. If I click on first input field and I did not write any validate data, and then I go to second input field -- it is showing a popup because of validation for change event. Here in this the keyboard that appeared when we click on the first input field is not removed when the popup showed up.
For this I removed the .focus for input field and
I tried like this also:
$('input').blur();
But there is no use I don't understand what is the exact problem it comes in Celkon device. Please suggest me any appropriate solution for this issue.
I'm encountering an issue with a JQuery modal form with many labels and corresponding input fields in it.
The issue occurs when I open the JQuery modal form and scroll down. When I close and re-open the JQuery modal form, the form is auto-scrolled so that the first input field is at the top of the form and has keyboard focus. However, this cuts off the label and header above the first input field.
I have tried $("input").blur(), and that successfully disables keyboard focus on the first input element, but the modal form still automatically scrolls so that the first input form is flush against the top of the screen.
I have also tried placing a hidden input field above everything else in the JQuery modal form, but Firefox is smart about it and still scrolls to the first active non-hidden input element.
Has anyone encountered this situation before, and if so, does anyone know the proper resolution for it?
Issue resolved. I used the scrollTop() method on the JQuery modal dialog div itself, like so:
$("dialog").scrollTop(0);
This is separate and distinct from autofocus/blur issues, as Firefox's autopositioning apparently does not tie with its autofocus.