Pristine | Vanilla javascript form validation | Validation library

I want to change the value of 3 input text at the same time. The strange behaviour comes when I try to change the first input field (all of them are changed), then I change the second input field, again I would expect all of them changed, yet you can see the first one won't change. It is like only "pristine" input fields will change.

https://stackblitz.com/edit/saavz2?file=my-element.js

I am transitioning from Redux-forms to react-final-forms, and I'm having trouble figuring out how to handle hidden form values. In redux-forms I could do something like this.props.change("createdBy", this.props.user.profile.username) to set a hidden value, but that option doesn't appear to be an option in react-final-forms (or I am missing it).

I have thought that I could possibly use initialValues which works on new forms, but I run into trouble if I need to add additional values in a initial form. For example,

I want to use this pattern /^[a-zA-ZÀ-ÖØ-öø-ÿ+\.+\- ]+$/i to validate names in fields. But in the HTML validation this does not work. I used pristine.js before and in there it worked without any problem.

I also created a JS Fiddle: https://jsfiddle.net/3et69oz8/:

I need help selecting an element on a webpage with Selenium. I have been using Selenium on this website for about 3 weeks and so far, I can usually find an element by css selector or XPath. However, this specific section of the website is giving me a very hard time. After I click on “reset office 365 password” a window comes up and I want to programmably put in the new password but it can’t find anything in the popup window. Here is what the page looks like: (I am too low of score to post pictures here) https://cdn.discordapp.com/attachments/768594779344470022/845811910577881098/unknown.png

Here is the whole element’s information:

I'm trying to automate a few things around the office and this program is supposed to log into our insurance companies website and pull information for use by payroll. Here is the function I use to input values in the webpage.

On this table I have several entries (on the html bellow, i will only put the relevant entry). I need to select an button under the trash column if the entry contains a folder on the "content" column

I am trying to locate and click an element by text. The reason is that the id and location of the element are dynamic but the text is always the same.

Here it is how look like as a HTML:

I currently have an text control input component that acts as the input field for my form. I am reusing this for each piece of input data I need e.g. Name, Email, Password etc.

I have setup the component to take required, minLength and maxLength (which currently don't display an error and is part of my problem), and would also like them to use the inbuilt Angular directives for validation: pristine, dirty, touched etc which will then display the validation message in the parent form component.

I cannot work out how to apply these directives to the instance of the child component as it doesn't seem to reach the input field itself and I need to apply different directives to the different instances E.g. I need Name not to contain a number, but I do need Password to contain a number, therefore using different directives.

text-control.component.html

Is it possible to go to the next field on tab button press, if yes how can we do that.

Here I am using bootstrap classes col-md-6.

Thanks!