Develop Reference

ReactJS - How to log the specific field that is causing a 400 error code when submitting form

I am currently working on a web app that uses ReactJS as the frontend, and DRF as the backend, and I am working on the form validation right now. In the backend, for fields that are phone numbers, I am using PhoneNumber field, which is a Django library that interfaces with python-phonenumbers to validate phone numbers keyed in. Hence, I was thinking that it would be best if I do my form validation based on the response from the DRF api post request, since it would be tough for me to come up with a regex that completely complies with the PhoneNumber field's requirement. Hence, I am trying to figure out if it is possible for the axios error response to specifically tell me which field is causing the 400 error code. If so, I can then display the relevant error like 'This is not a phone number' above the relevant fields. Or if not, is there any better way for me to handle this and be able to align completely with the PhoneNumber field's requirements? Basically I do not want to run into an issue where the phone number passes the ReactJS form validation but fails the Django PhoneNumber field's requirements, and the form just fails to submit, without any indication of why (if I have the field and the error code, I can then deduce that it is due to the phone number being invalid, and display the necessary errors on the screen from there). I noticed that when using Postman to make API calls, it is able to tell me specifically which field is causing the error, and I was wondering if Axios can do the same?
Currently this is my .catch for the axios post request, and all it does is show me the error code and some other irrelevant information.
.catch(error => {
console.log(error.toJSON());
})
Below is the model I am trying to validate. The three fields below are the fields I have rendered in the form in ReactJS, and they would all be submitted under 1 API post request, which is why the specific field causing the error is important in knowing which field I should render an error message on so that the end user knows that he needs to change that specific field as it is an invalid phone number.
class CustomerInformation(models.Model):
customer_name = models.CharField(max_length=100)
telephone_number = PhoneNumberField(blank=True)
telephone_number_backup = PhoneNumberField(blank=True)
All help is welcome and appreciated, thank you in advance! I am new to ReactJS hence I am not sure if my intended solution is appropriate, please do guide me in the correct direction if I am wrong!

Okay, took some time and googling but figured it out, I can find the specifics of the error under error.response data.
This is what I did to my axios call (btw I am using DRF so im not sure if it would work for other backend systems)
.catch(error => {
console.log(error.response.data)
)}
Which would log out the errors flagged out by the backend when trying to post the request.
It comes in the form of an object, with the keys of the object as the field name, and the value of the corresponding key would be an array of the errors flagged out.
For example, the error message I got was:
{telephone_number: ["The phone number entered is not valid."]}
From there, I was able to render the relevant error messages onto the relevant fields by matching the key of the object to the name of the field.
Hope this has helped some people, it certainly helped me!

Limiting ACF's "acf/validate_save_post" action from a front-end form

I am using ACF's acf/validate_save_post action hook to validate a serial number from a front-end form with a 3rd party API before the form submits and saves to a post type.
If the call to the 3rd party API returns an error I am using this action hook to display validation errors using the acf_add_validation_error() function.
Due to the acf/validation_save_post action hook being called when a post is published (and before, when doing the JS validation), the serial number ends up being validated 3 times. This ends up locking the user out due to limits set on the API side.
Is there a way to lock the action hook out from running when a post is published and only have it run when it is doing the JS validation?
I have tried using wp_doing_ajax() in an if statement but I think all the work is done via AJAX anyway, unless I am wrong on that. It still appears to run more than once while using wp_doing_ajax() anyway so maybe there is another solution out there.

In case anyone finds this in the future, the solution to the issue is to check if this is an AJAX request via wp_doing_ajax(). This will stop validation while publishing the post via the admin or the acf/save_post action hook.

custom form control custom client side validation in Kentico

We've created a custom FormEngineUserControl to capture date input using 3 text inputs for day/month/year.
On the server we override the bool IsValid() method which works fine and displays the error message if invalid.
However we want to use client side validation also, we can use a CustomValidator control and assign a ClientValidationFunction to call a JS method however this is not then combined with the server validation function and we end up with two validation messages, one that removes when client validation passes, and one that only disappears when the form is re-submit, basically rendering the client validation useless.
Is there no way to register a client validation method with a custom form control? that will then be combined with the server method and error label etc. ?

This should work pretty much like any other .net user control. How are you preventing further processing if the validator returns false? You might need to set StopProcessing property to true.
There a few similar topics which might address your porblem:
stop execution in Custom validator if it false
Custom validator fires but does not prevent postback

I don't think this is feasible as I'm not sure how you could combine client vs server side validation. You cannot ever disable server side validation. The client side validation is just there for better UX, its not secured by any means. The general idea this is used is that you disable form submission until all fields are verified on the client side. If the validation is the same on the server, you should not see the same error messages because otherwise it wouldn't go pass the client in the first place.
The way you could do this in Kentico is to use some custom js (or better yet some framework/library to help you with validation such as validate.js), give Kentico form some id/class and connect the form validation with your js and have each side (client/server) do its job.

Use javascript to control some html fields of a form before submitting

Before submitting a form, i use javascript code (surrounded in PHP) in order to make locally some controls but sometimes javascript may not be enabled client-side.
The fact is that I have to check by pattern/regex each control of the form for example checking email, phone number,.. format so that user cannot enter anything haphazardly. Therefore, if javascript is not enabled, the form must not be submitted, even if all field are fulfilled out.
Therefore my question is to know if there is a tag or function which allow to perform what i want to?
Thank for your help

JavaScript runs client-side.
That means that users have FULL CONTROL over it.
Then, if they want to disable it, you can't do anything about it.
The only thing you should do is be sure that users with JS disabled will be able to submit the form too.
If you use JS to validate the form, be aware that users have FULL CONTROL over it, so they can send the form if they want, even if your code says that it's invalid.
The right way to do it is:
Be sure users without javascript can send the form
Implement client-side validation for users with javascript activation. This way they will have a better user experience (because can know if the data is invalid immediately) and is less server intensive (your server will have to validate less invalid forms).
ALWAYS validate the submited form server-side. Data coming from a client is always UNTRUSTED, even if you think you have validated it.

Node.js server-side form validation with client-side response

Express-form is a quite powerful validation plugin for node.js/express. However, in the examples and documentation, all the responses are server-side (console.log), which is enough for development, but not quite practical to tell the user what's wrong.
At the moment, I can imagine two different solutions:
Submit the form and redirect back / render the form again with req.body and validation messages attached to add 'error'-classes to wrong fields.
Submit the form using AJAX.
I would prefer option 2, as I don't want to query the database again when rendering 'new'. But I have no idea how to pass the validation results back to the client and add 'error'-classes to input fields.
Any ideas?

I try to validate user input via javascript in the first instance in the browser, and then validate on the server outputting errors in the rendered form (a la rails). Right now I'm using my set of custom validators so I can't point you in the right direction with express-form.
Along with my custom regexes I, sometimes, use the validator npm package, you can also use the validator validations in the browser using plain DOM or some framework.
edit:
working with AJAX validations is quite easy, you receive an object in your request (if you use express.bodyParser() middleware), validate the parameters, if there are some errors you can point at it in your response ex.
{
"errors": {
"foo": "must be a number"
}
}
and:
for (i in answer.errors) {
var target = document.getElementById(i);
target.class = "error";
// here you can also handle the error description
}
If you are using a framework on the browser side, there are plugins or I'm sure it's simple to write one.