Show errors on changing question value (optional)
See original GitHub issueHello. I have an issue that I hope you can help out with.
Are you requesting a feature, reporting a bug or ask a question?
Bug/question
What is the current behavior?
If I have a field that is invalid, i.e. it has an validation error on it, and I change the input text to something that I know is valid and then move the mouse to the Submit button without first clicking outside the given field, tabbing out or somehow lose focus of the field, OnValueChanged event is triggered but OnComplete is not.
Below are a series of images in which I try to explain the issue:
Not sure if necessary but below is the code we use for the two events:
container.on('KC.Web.Survey.OnValueChanged', function (event, sender, eventOptions) {
var questionHasErrors = eventOptions.question.hasErrors(true); // Check if question has errors and update UI accordingly
if (!questionHasErrors) {
// Save draft progress on value changed
var data = {
FormId: options.Form.Container.attr('data-id'),
SerializedInput: JSON.stringify(JS.Util.ReplaceIllegalCharacters(sender.data))
};
JS.Service.Post('External/Complaint/PersistFormInput', data);
}
//navigation(sender);
});
container.on('KC.Web.Survey.OnComplete', function (event, sender) {
var data = {
FormId: options.Form.Container.attr('data-id'),
SerializedInput: JSON.stringify(JS.Util.ReplaceIllegalCharacters(sender.data))
};
JS.Service.Post('External/Complaint/SubmitForm', data, function (response) {
JS.Global.HandleUrlResponse(response);
});
});
What is the expected behavior?
If I correct an invalid field and press the “Submit” button, without first triggering a OnValueChanged by changing focus out of the given field, I expect that the OnComplete event is triggered?
Kind regards, Nicklas
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (5 by maintainers)
Top GitHub Comments
@nicklas669 From the next minor version, you will be able to use the following code:
survey.checkErrorsMode = "onValueChanged";
Unfortunately, it doesn’t fix the issue you are mention and what is more sad, I am afraid there is no way to fix it. I have spent couple hours trying to understand what’s going on, untill I have ended up with the following example. You may see that this example has nothing to do with surveyjs or any javascript framework. It is pure javascript and html. When you are entering more then 3 letters into input and click on the button, the div on top is hidden and the button onclick, simply is not fired. Same happens in our library, next page or survey complete buttons click simply are not fired 😉
Probably it is the expected behavior, I have checked several browsers.
Thank you, Andrew
@mstoecke It was discussed in this thread - https://github.com/surveyjs/surveyjs/issues/1062 Here is the sample of the “validation on change” - https://plnkr.co/edit/ZNJ6TfOvHxLsquIXfmpY?p=preview