I have a form based on jquery-steps a PHP page to process the form submission.
The problem is that PHP file is too large and it need a lot of time to process ( API file are connected ) so some time my visitor click many time on the submit button.
My question is, how to disable the submit button after clicking on submit ?
Note :
My case is different of this case : How to prevent form from submitting multiple times from client side?
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 would like to see if there is a way to prevent a refresh and use the hook "useUpdate" in React-Admin.
Use case would be I am emplimenting a auto save feature for my form and save it on the back end.
I'm currently using useUpdate but with the nature of my form, a reload would not be a good UI because the form could be 50-100 fields long. So a user could be editing a field close to the end and auto save will send them back to the top of the page.
I still want to use the data provider. Currently this is only being used to Edit a record
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.
I am making a web app in which I have a section which has an input field. Anything that is submitted through the input field gets posted to an API. So when you land on that screen you see all the previous inputs made. What I am not able to figure out is and the thing I want to achieve is that when someone submits a new input it doesn't reflect in UI until and unless you go back and come back to the screen. I want that as soon as you send an input the input string should be reflected in the UI. How can this be done using AngularJS?
You have two options, at a very basic level they are:
1) The first is to re-query all the list when the item is saved:
api.save(newPost).then(() => getAllPosts());
2) You can return the recently saved post and add it to the list:
api.save(newPost).then((saved) => $scope.posts.push(saved));
You'll need to handle all the unwrapping (etc) based on how you're making the calls.
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