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.
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.
A problem of the Validator class is that it validates all the inputs to which a constraint is added (that means that an error message is shown in not already filled inputs or selected pickers):
Validator val = new Validator();
val.addConstraint(title, new LengthConstraint(2));
val.addConstraint(price, new NumericConstraint(true));
In this example, the validator will show an error for both title and price even if the user didn't entered a price yet.
It would be more intuitive that an error is shown only after the user has given the input, that means to show an error for the price only after that a price is given.
I didn't find a code to implement this behavior.
My first thought was just create a validator which will check if something was modified and add it to the validation chain. However, that would mean the input could be valid if you didn't enter everything.
This is a feature that should be implemented in the rendering logic for this class. In Validator itself. You can file an RFE for that or just implement it in a pull request.
In my form I have a username field that is user for registration. I would like to make this trigger an error message on the field. Something like the error message I would get if I did not enter a value on a field with ng-required.
Can someone tell me how I can make it so that when a user leaves the field then an HTTP request is sent to the database to check for an existing username and then if present an error condition is set for that field.
I am not really looking for specific HTTP request code but just even some pointers would be a big help.
Here's a nice guide on how to check a name field using custom directive and new features from 1.3
I'm building my first CodeIgniter app - and have a registration form. I'm using the built-in form validation class to validate the data, and am at the point of adding that data to the database.
Should I be taking that data from the form validation class or from the input class ($this->input->post('username'))?
I'm guessing the correct way is from the input class, but just wanted to be sure. If that's the case, if there any prepping of the data I need to do before it gets inserted into the database such as 'trim'?
Thanks
Yes you would get the data from the input class. Operations such as trim() can be done using the form validation library by adding the trim to the set of rules for validation. When the validation is done, your data is ready to be inserted to the database.
I've always used $this->input->post('lalal'); and found it to work since the validation is already done when i use the values. But you could also use the set_value('lalal'); helper function, this is particularly useful if you found an error but don't want the user to entery every form field again but just the one that was faulty.
Your prepping of the data should be in the validation rules, you can add any php-functions that take one argument, ie trim, also you can call on the helper functions CI offers if they are loaded when the validation happens. And you have the built-in's that CI has with the validation class.
For more info check out: http://codeigniter.com/user_guide/libraries/form_validation.html#thecontroller