this question is about where to put validation of an form element in redux. I feeeeel as though I should have an onValueChange event that dispatches an action to the reducer that validates and updates both the value ( invalid or valid as it may be ) as well as the "isValid" property on state so that that element can then display an error.
Conversely, I could do the validation in the action, and if it fails just dispatch a failure action instead.
One note is that i do prefer the anonymous function nomenclature to extending the react.component.
I guess I should change then name of this to where is the proper place to put validation in the redux flow.
Keep the validation in your component. I hear a lot of "keep all state in redux", but I try to only keep what I absolutely need in redux. Use component state with a error property and if your validation fails set the state on the error property. As well, redux forms: http://redux-form.com/4.2.0/#/?_k=mhjui4 is a good library for simple and complex forms.
Related
I have added errors manually to my input using the link in here Here and the example in Here but when I try $("#myshowErrors").valid() after I added the errors it becomes true?
here is my code
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
"firstname": "I know that your firstname is Pete, Pete!"
});
I am not able to make the client validation fail. How can I make form.valid() to return false?
I don't want to make form.valid()=false; manually I want that to be taken care of by just setting the errors.
It's entirely unclear by the lack of code in your question, but I think you might misunderstand where to attach the .valid() method.
This method only gets attached to a selector representing a single <form> element...
$('#myform').valid(); // triggers validation on the entire form
Or to any selector that represents a single form input element...
$('#myform input[name="myinput"]').valid(); // triggers validation on one input element
When .valid() is called, validation is triggered on the selected element, error message(s) is/are displayed, and the method will return true or false.
The .valid() method can never be attached to a selector that represents more than one element, or a collection of elements without also using a jQuery .each().
EDITS:
showErrors is just for showing existing errors. You cannot "invalidate" a field by calling showErrors. Fields are either valid or invalid based solely on what is contained within that field.
You've tagged the question with Unobtrusive Validation. Since jQuery Validation is handled automatically via the Unobtrusive Validation plugin, you are not allowed to call your own instance of the .validate() method. That's because the Unobtrusive plugin automatically constructs and calls .validate(). Once it's called, the plugin is initialized, it cannot be called again, and all subsequent calls are always ignored.
I have a scenario where I have to validate whether one of the input fields have values entered.
In the OnBlur Event of each input field I get the value and set in the state, and in the mean time I check whether there is values in one of those input boxes and set the inputIsReq state. And I use that inputIsReq in the required attribute in each text field. After this change my page loads really slow, and the validations doesn't happen too. Any idea to fix this ?
Your code is running slow because you are calling the method changeInputValue instead of passing it as a callback.
this will call changeInputValue:
wrong:
onBlur={this.changeInputValue("input_4_value", this)}
correct:
onBlur={() => this.changeInputValue("input_4_value", this)}
Abowe example will pass changeInputValue as a callback.
you can also
onBlur={changeInputValue} but then you can't pass any params to callback
You were calling changeInputValue in a loop since it have changed the state and then component was re rendered and so on... This was also producing the warning in a console
warning.js:36 Warning: setState(...): Cannot update during an existing
state transition (such as within render or another component's
constructor). Render methods should be a pure function of props and
state; constructor side-effects are an anti-pattern, but can be moved
to componentWillMount.
I like to re-trigger validations after the form has mounted. Let's assume I like to run the validations each time I click a button named 'validate inputs'.
How to do this?
Related questions:
How to run validation on a slice of a redux-form FieldArray state
Is there a way in Redux Forms to make a form validate from code?
Manual redux-form validation is an oft requested feature, that does not seem to be provided at the moment.
My personal workaround is to trigger this.props.change('_validationHack', Date.now()) in the reduxForm-wrapped component and then remove values._validationHack in the onSubmit method before sending the values to the server.
It's not pretty, but seems to work without exception.
According to 28/11/2018:
https://redux-form.com/6.2.1/docs/api/actioncreators.md/
There are actions that you can dispatch for making changes to your form and triggering the validation method.
If you trigger change/touch actions it should execute the validate function.
This worked for me:
import { touch, stopAsyncValidation } from 'redux-form';
//...
yield put(stopAsyncValidation('CallForm', { mdn: mdn.error_message }));
yield put(touch('CallForm', 'mdn'));
clue from https://stackoverflow.com/a/51065315/588759
clue about touch https://github.com/redux-form/redux-form/issues/3992#issuecomment-399411329
working example https://github.com/zobroj/ab-web/blob/ea4fccb68b4f3a2f747f47d23624bc69631782ed/app/containers/RegisterPage/sagas.js#L62
found with https://github.com/search?l=JavaScript&q=%22yield+put%28touch%28%22&type=Code
The sync validation is run on every render, so "triggering it" doesn't really have much meaning.
If you would like to use async validation, there is a this.props.asyncValidate() function that you can call to trigger it.
OR, if you prefer submit validation, you could just submit the form.
The specific case I've got in mind is as follows: an AjaxFormComponentUpdatingBehavior("onchange") is added to a TextField in a form. The behavior verifies the text for certain conditions (either the model object or the form component model, doesn't matter), based on which it might display a message (or hide it, if it has already been shown).
The problem is, there are also validators added to the TextField. One of the possible (and likely) scenarios consists of the user typing in, first, a value that causes the message to be displayed by the AJAX request. If, then, he/she types in a value that doesn't pass validation, the message should disappear, but it does not.
Apparently, either the onUpdate() method for the AJAX behavior is not called at all, or I am failing in my attempts to insert a check for non-validated entries (I have tried to test for both null values and empty strings, to no avail; I have no idea what exactly Wicket's validators do to models when data is invalid).
I am wondering if someone who actually understands validators (or AJAX, actually) has any ideas on where the problem could be.
I can post edit and post code if someone tells me this is not a general issue tying validators and AJAX, but most likely a programming mistake. I still believe the former and thus I'll refrain from posting code sections, in order to keep the discussion on an API/theoretical frame.
Thanks.
When using an AjaxFormComponentUpdatingBehavior, if any of the IValidators fail their validation, onError() will be called instead of onUpdate(). Wicket will effectively prevent invalid user input from reaching the IModels in your components, so the component's ModelObject will not be changed at all. The invalid input will probably remain available by means of getInput()/getConvertedInput() (not sure if it will in an AJAX scenario, it sure is in a traditional form submission).
However, take into account that IFormValidators are not executed when using this mechanism. If you've got any, you might be interested in overriding getUpdateModel() so that AjaxFormComponentUpdatingBehavior will not bring maybe-invalid user input into your IModels, and set modelobjects manually when you're certain user input is valid.
Regarding your specific case, you could perform all the required logic in onError() (or rely on Models that will grab data from somewhere else), and just add the components that need refreshing to the AjaxRequestTarget. This is probably what's missing in your scenario.
I would like to validate both single field and multiple field data from a CakePHP form.
The single field validation should be done on blur from each field while the multiple field validation should be done on submitting the form.
I would like to use the $validate property declared in the Model for validating data and I would like to display the errors near each field (single field validation) and on top of the form (for multiple field validation).
My main goal is to achieve this the most "caky" way (if there is one for validating data with jQuery). I couldn't find any useful advice out there and I'm asking you for some help to get this going.
One of my concerns is how shall I pass data from the form to jQuery and then to the action that does the validation and also how shall I return and display the errors, if there are any.
Thank you in advance!
I'd suggest first making sure everything works without jQuery, then use the jQuery Form plugin to submit your forms via AJAX. If you include the RequestHandler component in your AppController, you should find that your controllers distinguish automatically between AJAX and synchronous requests.
OK, so I coded my own solution to this, but I am still waiting for a more "caky" approach.
I made two generic jQuery functions, one for single field validation and one for multiple field validation. The function should grab the data from the specified form and send it to the form's action via AJAX, to a specially created controller method which will attempt to validate data and output an AJAX response ("" for validation has passed and errors for errors in validation). Then, the result is checked in the jQuery function and the default form behaviour is triggered only if the validation has passed. Otherwise, display the errors and return false; to prevent default submission.