Suggestion T2686
Visible to All Users

Enable Next Button When Required Fields Valid

created 5 years ago (modified 5 years ago)

Hello, my question is in a similar vein to https://surveyjs.answerdesk.io/ticket/details/t1342

I would like to have the next button disabled until the user has valid entries in all required fields. I have this somewhat working, however I am running into the issue that my onValueChanged function is not called with each letter typed into the text fields - it is instead only called when the user clicks out of the textField (see https://plnkr.co/edit/ZNJ6TfOvHxLsquIXfmpY?p=preview).

This is different that how it appears to work in the example given in the previous version of this question, which seems to call onValueChanged for each letter typed https://plnkr.co/edit/LXGfGj9KiVkK5pnB3ldG?p=preview. I'm wondering if I am doing something wrong, or if this is a bug.

I'm using react, I've tried with survey-react": "^1.1.12" and "^1.0.89"

Answers

created 5 years ago (modified 5 years ago)

Hello,

As I've answered you on github, the entered value is passed to the survey model on input control lost focus. The change value event causes recalculation of all visibleIf, enableIf rules, survey triggers and calculated expressions. It can be very time-expensive to recalculate all these things on every keydown event. Also recalculating expressions with incomplete (=wrong) value can cause unnecessary UI updates. Thus leaving input control user tells us "I've completed entering this value". This is why it works so.

Thanks, Serge
SurveyJS Team

    Comments (3)

      We just spoke with Serge.
      We will keep in mind your scenario. We believe it would look good in our new design. We will discuss it on the next week and for now keep it as a suggestion.

      Thank you,
      Andrew
      SurveyJS Team

        Thanks for the response, apologies for the double github/support post - I just wasn't sure if this was a bug, a missing feature, or if I was doing something wrong (given the conflicting plnkr links above). I'm coming for a team that regularly uses controlled inputs or the handleChange property on inputs in react (called every keystroke) for real-time validation & button activation in our forms (e.g. in our signup forms), so this was something we were expecting to also implement in our surveys. Aside from that, we're really enjoying this library so far - and great support too!

          Hello,
          We have discussed this functionality one more time and to be honest we do not see a value in it. So far, you are the only one who is asking for it. It will likely confuse users for a large pages. If there is an error in a question, a user may do not understand why the button "Next"/"Complete" is disabled. Right now, on pressing these buttons we will focus the first question with the error.
          So, we do not see any value in this functionality for any survey.checkErrorsMode property value: "onNextPage", "onValueChanged" or "onComplete".

          Thank you,
          Andrew
          SurveyJS Team