I'm using Formik for a form that will be used to create a user. Validating form values using a Yup validation schema.
However, I also need to check whether the username is valid via an api call as the user fills out the form (not just on submission). I can set errors collection manually if the api call returns that the username is taken, but this is subsequently cleared as the field in question passes its Yup validation (which just checks for length).
What's the best approach for this apart from just managing the check in React and preventing form submission if (say) a state flag is set?
====================================================
Ok, I figured it out. I used .test and as this accepts a validator function that returns a promise I could use that for my async call.
Custom errors created using createError (see docs).
All the best
Mark
Related
I'm building React app with Apollo.
I would like to make a form like...
call mutation onChange of input
the value of input is changed as the user type
I tried...
useMutation to save the value
useQuery for the value of input
But the value is changed after saved. It's a little late. Also, I have to press delete key twice to make the value empty.
I know that I can use useState for the form value, but is there any way to do this easier? Is there any way to hold the form value even under unstable network, and try resending later?
'optimisticResponse' is the option for this case.
It's often possible to predict the most likely result of a mutation before your GraphQL server returns it. Apollo Client can use this "most likely result" to update your UI optimistically, making your app feel more responsive to the user.
https://www.apollographql.com/docs/react/performance/optimistic-ui/
I'm validating and sanitizing user inputs from the server-side. I'm also validating it from the front-end. But I'm wondering if I should also modify the input values to match the server's requirement before sending a request.
For example, I have a form with a birthday text input in MM-dd format. But the server requires a month(MM) and a day of the month(dd) values separately. I can format the input to match the server's requirement(MM and dd), or I can just pass the value without modification and the server will do the rest. Which method is recommended?
This question is more related to UX practices then frontend itself. I believe that before server validation, frontend checks should be performed.
You shouldn't validate and you definitely shouldn't change any values during user completing the form. However the common practice is to validate fields on blur. This is when you can change fields values.
However I would be very careful with this, to avoid confusing the user. So stripping whitespaces etc. should not be a problem, but aggressive input changes should be avoided.
Also try input masking for operations like date formats.
Check for example this library
https://nosir.github.io/cleave.js/
EDIT:
I case of changing values before sending them to backend, it's perfectly fine. It's good practice to have some mapping layer, which will map between UI forms and DTOs required by backend. UI should be focused on user experience, so some extra work will be required almost every time in more complex scenarios
I want to delete validation errors generated by PHP (that is server-side) when user triggers any validation.
I can delete previous validation errors when in fact there are new errors using the errorsContainer option.
(As on the next example: http://jsfiddle.net/bzydxoL9/)
But I do want to intercept validations always, no matter if valid or invalid ones.
How can I intercept a validation?
Inventive use of errorsContainer, but it's really not meant to be used this way.
Listen to the events like field:validate instead.
I am validating with Cake 3 but can't get it working probably.
As the docs says there are two stages of validating:
Before you save your data you will probably want to ensure the data is correct and consistent. In CakePHP we have two stages of validation:
Before request data is converted into entities, validation rules around data types and formatting can be applied.
Before data is saved, domain or application rules can be applied. These rules help ensure that your application’s data remains consistent.
So, if I understand this right, at first validation rules are used when I pass data via newEntity and patchEntity.
After that, the application rules are used when using save or delete.
However, when I am passing data (an array) via newEntity the application rules are never used (buildRules is never called). When using newEntity without passing data, application rules are used!
So, my first question, is it right that not both rules are runned, only one (OR validation rules, OR application rules?). I would expect that first validation rules would be called to check the input, and before saving, ALSO the application rules would be called to check if the entity is valid to the applicaton.
Second question, how should I validate with my API? The actions pass their data via the newEntity method, but I want to check if (for example) the category_id belongs to the same user. Thats typical an application rule I guess?
Thank you very much ;)
Quoting CakePHP documentation:
Validation objects are intended primarily for validating user input, i.e. forms and any other posted request data.
Basically, validation is done when you use newEntity or patchEntity to check that the incoming data is consistent:
You don't have a random string where you should have a number
The user email is of correct format
Standard and confirmation passwords are equals
etc.
Validation is not done when you set field manually:
$user->email = 'not a valid email' ; // no validation check
Basically, validation rules are meant to tell the user « Hey, you did something wrong! ».
Application rules on the other end are always checked when you call save or delete, these may be used for:
Checking uniqueness of a field
Checking that a foreign key exist - There is an Group that correspond to your group_id
etc.
Your first assumption is somehow false because in the following scenario, both validation and application rules are checked:
$article = $this->Articles->newEntity($this->request->data);
$this->Articles->save($article) ;
This part of the documentation explain the difference between the two layers of validation.
Concerning your second question, you should not check that a user has the right to do something in your model, this should be done by your controller, see CakePHP book for more details.
Working with cakePHP this is my situation:
I have Users and Orders. Orders are created by Users. Only the user that created the Order is allowed to edit it. (admins can also, but I don't think that is important).
I am using the standard Auth component and have an isAuthorized function in my OrdersController that checks if the user is logged in and stops users from performing actions that they are not allowed to perform.
I want to make a decision on whether or not the user can perform the action based on the params passed and the data that comes out of the database. i.e. does the user own the order they are trying to edit? I am currently checking inside each action if this is the case.
Is there a way that I can trigger the same workflow that is triggered by returning false from isAuthorized? maybe throwing an Exception?
I don't want to do these finer checks inside the isAuthorized function, because it will require ugly methods of accessing the passed params, and duplication of data retrieval. How does cakePHP expect me to handle this?
(I have more complicated checks to make in other controllers)
This is what you're looking for:
http://book.cakephp.org/2.0/en/tutorials-and-examples/blog-auth-example/auth.html#authorization-who-s-allowed-to-access-what
overriding the AppController’s isAuthorized() call and internally
checking if the parent class is already authorizing the user. If he isn’t, then just allow him to access the add action, and conditionally access
edit and delete.
Hope this helps
There are a few ways to get this to work. I have a simple example outlined here:
http://nuts-and-bolts-of-cakephp.com/2009/04/22/simplistic-example-of-row-level-access-control-with-auth-security-and-app-model-in-cakephp/
It should give you an idea of how to handle this in general, and then you can build on top of that as one approach.