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.
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.
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.
I'm trying to find a good way to do field validation in a WebObjects app. If I have a text field and I tie a number formatter to it, it seems that the default behavior is to parse out the number IF the user enters in a valid number, or, if the user enters an invalid number, it seems to just ignore the value entered by the user. I can't do the validation in a save method or an action method because WO will have already ignored the non-number input by the time it reaches the action method. Is there a standard/recommended way, in a WebObjects app, of validating user input such that the user can be alerted of invalid input, rather than just ignoring the invalid input?
This page: http://en.wikibooks.org/wiki/WebObjects/EOF/Using_EOF/Validation claims that WO and EOF have "an incredible array of validation mechanisms" and even hints that there is a built-in way to prevent the user from entering inappropriate data, but I haven't been able to find any documentation or examples of how to do that (if there is, in fact, a built-in way). Coming up with a custom javascript validator to prevent inappropriate data seems like it would be a nightmare - finding a way to make the JS recognize and handle all of the same edge cases that the backend formatters/parsers handle. It would be nice if WO really did have a built-in way to propagate the formatter edge cases over to JS validation.
The above link also says there is a validationFailedWithException method in WOComponent that gets called "when an EO or formatter failed validation during an assignment", but how can I make a formatter fail validation in the non-number example case above? I've tried having the formatter throw an exception in the parse method if a non-number is entered, but that exception doesn't get passed to the validationFailedWithException method. Does anyone know how I can trigger an exception in a formatter that will trigger a call to validationFailedWithException()? And is that even the best/recommended way? Does anyone know of a better way?
I'm pretty sure, that validationFailedWithException is getting called for every formatting error. You should receive there an NSValidationException that wraps a ParseException. The method is usually called on the component containing the binding. It may get skipped on caret (^) bindings.
All the standard number formatter already throw a ParseException (see Format.parse(String)).
The validation handling in WebObjects can get quite complex, it really depends on your needs. But it was designed without JavaScript or Ajax in mind. Newer approaches in Wonder may incorporate the client side, but I have no experience with it.
The normal validation sequence is:
if needed convert the input into the target type with a formatter
call a validateAttributeName method on the target object, where AttributeName is the attribute name to receive the value
When something fails in this sequence validationFailedWithException is called.
While saving an enterprise object "validateFor..." is called on the objects. An exception at this point has to be caught in your action method.
So you have two points to handle validation errors. The "syntactical" errors have to be handled in validationFailedWithException. After this point you have valid inputs. You may manually further check those or greater object structures in your action method or in validateFor... (e.g. validateForSave).
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've got a Backbone model with a custom validate method that validates the format of one of a the model's attributes. My model is hooked up to a view that exposes said attribute via a text field. The view has a 'save' button that the user must explicitly press to save the model changes back to the server.
When the user types an invalid attribute value, I want to visually mark the field as being in an invalid state. So far, easy - I can bind the change event of the input field to a function that calls myModel.set({ attribute: value }), and listen for the "error" event on the model to tell when the validation has failed and I should mark the input as invalid.
The problem comes when I want to handle the save button click. Because Backbone.Model.set aborts actually setting the attributes on the model if validation fails, my model will not accurately reflect the value the user has entered unless the value is valid. When the user clicks save after typing in an invalid value, I check whether the model is valid, find that it is (because the invalid attribute was never actually set), and save the old (valid) attribute value to the server.
What it seems like I want is a version of set that always makes the requested changes, but also still triggers validations and events. set(..., { silent: true }) will allow the change to go through, but will not run validations or trigger events.
In short - I want my model to sometimes exist in an invalid state (if the user has entered invalid attribute values), and I want to be able to get events when it transitions between valid and invalid. Is there a graceful way to do this with backbone, or am I thinking about this completely wrong?
I suggest you use this backbone validation plugin https://github.com/thedersen/backbone.validation
Extremely helpful.
For your usecase (to allow values to be set even if they are invalid),
you just need to do override the set function of your model.
set: function (key, value, options) {
options || (options = {});
options = _.extend(options, { forceUpdate: true });
return Backbone.Model.prototype.set.call(this, key, value, options);
}
The 'forceUpdate' property of backbone.validation allows the validate method to return true, while still calling for validations.
After the save click, you can call,
var errors = model.validate(model.validate.attributes);
This will return all the errors that your model has and you can appropriately display them.
You also have callbacks for valid and invalid which you can use freely
What I've done with this sort of validation is to reset the models attributes from the inputs before save on the save click (only doing the save if the set doesn't fail)
This way the save button click re triggers the validation - triggering the error.
It means the model is always valid and you cant progress to the next page until the input is all valid.