We currently have a text input field that needs a 4-digit pattern. We've set it up so that the border turns red when the field is required and empty. However, if the pattern is "99-99," the hyphen counts as a value, so the border doesn't turn red even if no digits are entered. Also, we can't add an event listener to input fields with a pattern mask; it only works with other types of masks.
below are the examples
In this example, since there is no value, the border is red. This is a normal input box without any mask.
In this example, we've used an input box with the pattern "99-99."
In the first example, since there is no value, the border is red. In the second example, it doesn’t have any value, yet it shows a grey border, which indicates that we already have some value. Is there a way to not treat the pattern as a value?
Hi Sandesh,
Would you please clarify how you implemented the following behavior?
If possible, share a demo for research.
I look forward to your reply.
Hi Jane,
Please check this demo
https://codesandbox.io/p/sandbox/surveyjs-angular-forked-ws8ys9
In the below screen shot, the border of the "inputWithOutPattern" textbox is red when it contains no data, whereas the "inputWithPattern" textbox is displayed in grey.
Hi Jane,
Please the check demo link provided in the comment above by Rita.
Hi Sandesh,
Thank you for the update. I may need additional time to check your demo. Please stay tuned.
Hi Sandesh,
In your demo, you use the
inputElement.valueto check if a field is empty. When you use an input mask, this value returns an input mask placeholder. Would you please elaborate on your ultimate goal? I see that you're creating floating labels. Do you wish to additionally highlight empty fields with Red? Take note that you can mark fields required and programmatically callsurvey.validate()to highlight empty fields. Will this work for you?Hi Jane,
Thank you for your response.
As you correctly pointed out, our end goal is to highlight empty fields by changing their border to red. However, we are encountering two problems while implementing this solution:
Problem 1: The
inputElement.valuereturns the placeholder for pattern fields. Although callingsurvey.validate()explicitly shows "Response Required" above the input box, we are unable to utilize this to highlight the border in red.when used survey.validate()
Trying to achieve this
Problem 2: We cannot add an event listener for the "input" event on fields with patterns. We are trying to attach an
addEventListenerto the input event for these fields, but it does not seem to work.Called from the
updateLabelAndInputStatemethod like this:and handled like this
Hi Rita,
Thank you for the update. You can render a red border for required fields by applying the following CSS:
.sd-input--error { border: 1px solid red; background-color: unset; }View Demo
The red border will be removed once a user fixes validation errors.
Correct. When an input field has a mask applied, it controls the input events. If you wish to listen to input events, you can disable the masked input and use the
survey.onAfterRenderQuestionInputfunction to add the input event listener.survey.onAfterRenderQuestionInput.add((sender, options) => { const question = options.question; options.htmlElement.addEventListener("input", (event) => { const inputValue = event.target.value; console.log( "Question: " + question.name + "; Input changed:", inputValue ); }); });To ensure that the value entered matched the specified pattern, enable form validation.
I hope this information helps. Let me know if you have further questions.
For the record: the following demo shows how to implement floating labels using Bootstrap: View CodeSandbox.
I hope this demo will be of help.