Question T4999
Visible to All Users

Unable to show required error onBlur when text is empty

created 4 years ago (modified 4 years ago)

Trying to show the required text error onBlur when a input field changes focus. We tried both

TypeScript
surveyModel.checkErrorsMode = 'onValueChanged'

as well as tried the manual way:

TypeScript
surveyModel.onValueChanging.add((survey, options) => { if (!options.question) return options.question.hasErrors(true); }

However because the initial value is empty, and remains empty after you unfocus, no onValueChanged event is fired. Is there another event or something similar we can do to show the isRequired error message?

Thanks

Answers approved by surveyjs Support

created 4 years ago

Hello,

You can use onAfterRenderQuestionInput event to add onblur event on question's input. Then in onblur callback check the question's value and show required text. Here is live sample in plunker

JavaScript
survey.onAfterRenderQuestionInput.add(function(sender, options{ options.htmlElement.addEventListener("blur", function({ if (!options.question.value) { options.question.hasErrors(true); } }); });

Thanks, Alex
SurveyJS Team

    Comments (3)

      Thanks Alex that worked!

      We noticed though for radiogroup questions, that the blur does not work even though the radio buttons are <input type="radio" ...>

      Is there something we can use that's similar for these questions?

        Hello,
        checkErrorsMode = 'onValueChanged' should work here. On clicking any radio button, onValueChanged event is fired. You can set handler onblur html radio buttons event as well. Please note, that you have to do it for all radio buttons in radiogroup questions.

        Thank you,
        Andrew
        SurveyJS Team

        MP MP
        Marcus Pridham 4 years ago

          Here is the additional snippet that was required to be added to onAfterRenderQuestionInput to handle radio buttons.

          TypeScript
          if (options.question.getType() === 'radiogroup') { options.htmlElement.querySelectorAll("input").forEach((value) => { value.addEventListener('blur', () => { options.question.hasErrors(true); }) }) }