Use Asynchronous Validation after Submitting a Form in redux-form
After the user hits the ‘Submit’ button of a form, we may want to perform some server-side validation which involves checking our database to evaluate the validity of our form.
Instructor: [00:00] let's add some submit validation to our form. When the user hits submit, we're going to check if their user name already exists and return an appropriate error message. To do this, we firstly need to import submission error from Redux Form inside our app component, which is used to differentiate IO errors from validation errors.
[00:26] Inside our submit method, which is being fired on submit, we're going to add an if statement. The alert that we have down here is going to come in the else section. Here's where we're going to check to see if the user name is available. In the real world, we would query our database, but for the sake of this example, we'll mark some already-taken user names.
[00:57] If our user name is one of those, then we want to throw a new submission error, passing in an object, and the object keys must pertain to form field names, in this case, user name, and the value can be an appropriate error message. Let's save and refresh. We'll add some example values.
[01:27] I've used a user name which is already taken. I'll hit submit. Here's the appropriate error message...
const onSubmit = async(values)=>{ const data = {service, email};
const response = await axios({
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
//url: 'https://wwww.afghanconsulate-munich.com/terminserver/sendemail.php',
url: config.apiEndPoint+'/hasactiveappointment.php',
data: data
});
if(response.data ==="exist"){
throw new SubmissionError({
service: "You have already an active appointment for this service!"
})
}
else
handleSubmit();
}
regardless of what i get from sever, it does not process further when i click submit
Hi @Rory Smith, Could you please help me with my code. i check in the mysql table if a record with that email and service exists, if yes, i return exist if not i return notExist, but i when i receive it via response.data , my condition does not work ad expected
Hi, How to avoid double entry of data when there is network issue or some other issue like user clicking a lot of times and creates same form many times? Thanks