I have a list of entities all of which are arranged in a virtualized list sporting 2 required Textfields and a submit button each. (I followed the example provided here).
In useForm() I set the validation mode to 'onChange'.
This setup only kinda works. The validation does happen but the errors are not shown immediatley. Instead only after I start typing is the (now obsolete) error displayed.
Another problem is, that RHF doesn't call the onSubmit function even if there are no validation errors.
Here is a CS showcasing the problem:
https://codesandbox.io/s/hopeful-chatterjee-571glh?file=/src/App.js
Related
I want to be able to validate the entire form and get the validation result, but I want to do it 'silently'(i.e without making my fields go red). I know that formContext.trigger exists, but that doesn't seem to have a softer setting. I don't want to show errors to the user, I just want to check if what they have got so far is valid. Is this possible with react hook form?
Context:
I'm using 'onChange' mode for my form
I need to do this because as a user fills my form in, which is for a pricing page, I want to send requests to get the pricing information which changes based on the form data. I don't want to send a pricing request if the form isn't valid, but I don't want to trigger full validation and make the fields go red when the user hasn't done anything wrong, they're just filling the form out in order.
I have a registration Form with a Validator binded to some TextFields and Pickers, and binded to a submit Button.
One of these TextField is for email. Suppose that I have a Rest API to know if a given email is already registered or not.
Currently the Validator only checks if the given email is a valid email. I also want to check if it’s already registered: if yes, the validation must fails, the submit button must be disabled and an informative Label must be shown under the TextField in issue (the emblem icon doesn’t make sense in this case). It’s not an InputComponent, it’s a standard simple TextField.
I don’t know how to achieve this. Thank you for your support.
Showing something under the label is easy just add an error label below in the layout. If the label is blank it won't show and won't take up space.
The validation code is designed for fast client side validation. What you're talking about is server side validation and that's a result of a server error. You need to do that separately anyway by making a request and failing.
The submit button can be enabled in such a case since you don't necessarily want to delay submit but if the submit is pressed before the email check is done you can wait for that request to complete.
If you want this to go through the validator pattern you can just create a validator that returns false at first (but disable the error indications) then in the error below the validator you can write "checking email availability".
Once a result is received you just update the validator value and trigger a re-validation of the input. You can just invoke setText() again with the same text which should trigger validation.
Notice that if your making a webservice request on every data change event this will produce a pretty awful UI experience. You need to use a timer to send a delayed request when typing is done. I think I posted something like this in the past around here.
In my form if i enter numbers rather than text and it will give an error then after clicking on next button it should not be redirected to next page.
how to prevent this.
The clicking on the next button will execute a validation function, and based on the result, you will decide whether to navigate to the other page or display an error and stay on the same page.
Even better (and assuming that you have multiple fields in the form): check the value of every field when the user leaves the field (onBlur) and notify the user about the error immediately then. This is not instead of running validation on 'Next' or on 'Submit', since the user may click on the button without visiting that field.
Long time ago (as a test for me, during my study of react), I created a small project that implements a form. It is far from perfect, but you might find it useful: https://github.com/rahamin1/reactstrap-form
Having not much experience in ReactJS currently trying to solve components cascade loading. Let me explain use case on an example.
Assume we have 3 comboboxes - Author, Book, Library.
Something triggers loading Author data -> When data is loaded, the first found author is automatically selected and is used as search criteria for the second combobox(Book) -> When all books of the selected Author is loaded, the first found book is selected. The selected Author and Book are used as search criteria for the 3rd combobox(Library) - after library is found select the first in the list.
Data is loaded using 'cross-fetch'.
Internal component is built from 3 "Select"(comboboxes) controls. Initially, an internal
implementation of 'Select' React control is used but the flow was
checked with react-select library as well. In both cases the
initialization of comboboxes looks similar:
<Select
options={authors}
value={selectedAuthor}
onChange={this._authorChanged}
/>
react-redux#connect maps state to props
So the questions is:
how properly and what is a proper place to catch "data loading is complete" events so that the next planning loadings may be initiated?
What I did/thought about:
I can detect in render() method that it is time to start the following data loading but as I learned it is not a good solution(we better not to do any operations other than required for rendering inside the method).
Theoretically, I can build loading chain from my actions but at the moment I do not like the idea as:
despite load method is currently used only for the initializaion of combobox later I want to reuse it in other places where next loading is not needed;
currently for me this does not look consistent when data load is not fired by ui events
I thought setting default selected value value={selectedAuthor}
during initialization would fire onChange event but it seems not true(at least in my case).
I'm using the Angular framework with Angular Material controls in my recent application. I'm looking for a good solution for the following problem:
A form form with an input field named nickname is shown to the user. After the user has chosen a nickname and submitted the form, the server checks whether the nickname has already been taken. In that case, it returns an error to the Angular client.
To show an appropriate error to the user, the code then calls form.nickname.$setValidity('nicknameTaken', true). The new ngMessages module is used to display the error to the user. Further form.$isInvalid is used to disable the form controls to prevent the user from resubmitting the invalid nickname.
My problem is now the following: I'd like to have the error nicknameTaken automatically being removed as soon as the user begins to edit the form fields again. What is a good way to do this? Is there a predefined route to go when it comes to server-side validation errors of this kind? (Note that I am not asking for asynchronous validation because I only want to contact my server when the form is actually being submitted.)
I would write a normal validator directive instead. Something like
<input blacklist="takenNickNames" .../>
This directive would simply add a validator to the input, and this validator would make the input invalid if the model value is contained inside the given takenNickNames array (and valid if it's not present).
The takenNickNames array would be empty initially. When the form is submitted and the error comes back, the controller would add the invalid nick name to the array.
So, every time the user would enter something, the validator would be triggered, and would set the field valid or not, based on the taken nicknames stored in the array.
Here is a working example.