Validation of Input Field Against its Valuehelp Items

Question

I'd like to validate user inputs against its ValueHelp items

I'd rather not set the Input field to valueHelpOnly as that disables typing for the user.

Let's say we have a value-help list of "Rabbit", "Steed", and "Goat". I want the user to be able to type it out, but if they forget to type it fully like typing "Rab" instead of "Rabbit", I want the input field to match the input against the value-help items list, and throw an invalid entry error message.

What's the way of validating the user input against the value-help items list? Is there a way to validate this using regex?

score 0 · Answer 1 · answered Jul 12 '20 at 10:08

You can achieve this by using sap.m.ComboBox which I recommend over sap.m.Input: https://openui5.hana.ondemand.com/entity/sap.m.ComboBox/sample/sap.m.sample.ComboBoxValidation

E.g. with "Rabbit", "Steed", and "Goat":

But if you want to stick with sap.m.Input, the same can be achieved by evaluating selectedKey and the value. If none of the keys are matched and the value is not an empty string, then the value is not from the value-help list. In that case, set the valueState of the input control to Error.

Here is a small demo:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
], Fragment => Fragment.load({
  definition: `<Input xmlns="sap.m"
    showSuggestion="true"
    placeholder="Type rabbit, steed, or goat"
    change=".onChange">
    <SuggestionItem key="1" text="Rabbit" />
    <SuggestionItem key="2" text="Steed" />
    <SuggestionItem key="3" text="Goat" />
  </Input>`,
  controller: {
    onChange: function(event) {
      const input = event.getSource();
      const isInvalid = !input.getSelectedKey() && input.getValue().trim();
      input.setValueState(isInvalid ? "Error" : "None");
    },
  },
}).then(control => control.placeAt("content"))));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Ah, yes. The ComboBox would be a good option, it's just that my manager believes that ValueHelp is more suitable when there is a long list of options to choose from given that ValueHelps pop up a dialog that can display more items. — Eldwin Cheung, Jul 15 '20 at 16:15
I've implemented it but it always runs into error state even when selecting from the valueHelp. ` onLiveValidate:function(oEvent){ var oInput= oEvent.getSource(); var bValid= !oInput.getSelectedKey() && oInput.getValue().trim(); oInput.setValueState(bValid ? "Error":"None"); },` What I'd like bValid to do is compare getValue() to the list of items in valueHelp, not see if user selected a key. I want the user to be able to type the value & get it validated as error or not if the typed value doesnt match a value help item. — Eldwin Cheung, Jul 15 '20 at 16:50
@EldwinCheung Thanks for the update. I'll enhance my question next week with a dialog when I'm free. With the current form, the input works errorless. — Boghyon Hoffmann, Jul 15 '20 at 23:46

Validation of Input Field Against its Valuehelp Items

1 Answers1