Mandatory field validator in sapui5

Question

I have four text boxes with a name, age, city and phone. I have to check it if it stayed empty. he must warn me to fill out. How to check text field with required field validator in sapui5?

Answer 1

You can simply write a function that receives text fields and checks their value.
It might look like this:

function validateTextFieldValues() { // this function gets the first textfield var nameTextField = sap.ui.getCore().byId("idOfTheTextFieldContaingTheName"); //this function checks its value, you can insert more checks on the value if(nameTextField.getValue() === "") { alert("Please enter a name."); } // ... // the same for the other fields } 

Then you can associate this function with the click of a button, for example, when creating a button:

 new sap.ui.commons.Button({ // your buttonconfiguration click: function(){ validateTextFieldValues(); } }); 

In addition, TextField has a valueState attribute.
In connection with its liveChange event, liveChange is possible to check the input when entering:

 new sap.ui.commons.TextField({ // your configuration liveChange: function(){ if(this.getValue() === "") this.setValueState(sap.ui.core.ValueState.Error); else this.setValueState(sap.ui.core.ValueState.Success); } }); 

_{( https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.ValueState.html )}

Answer 2

You can check it when changing the field value itself, as shown below

 var oname = new sap.ui.commons.TextField({ id: 'input2', change : function(){ if(this.getValue()=='') alert("enter some value"); } }); 

Or you can write a function to check when you click a button.

Answer 3

Even using the required property will not help, since UI5 ​​does not put controls in form tags. Required property sets attribute

Aria-required = true

You can use jQuery to select all the elements necessary for the aria and process them on any other control event by pressing a button.

Below is a sample code for it.

 var oBtn = new sap.ui.commons.Button(); oBtn.attachPress(function(){ var error; jQuery('input[aria-required=true]').each(function(){ var oInput = sap.ui.getCore().byId(this.id); var val = oInput.getValue(); if(!val){ var sHtml = '<ul><li><strong> value is empty</li></ul>'; var sValueState = '<strong>Error!</strong>'; // Combine Input value, Error title and message into a Rich Tooltip var oTooltip = new sap.ui.commons.RichTooltip({ text: sHtml, valueStateText: sValueState}); oInput.setTooltip(oTooltip); oInput.setValueState(sap.ui.core.ValueState.Error); error = false; }else{ oInput.setValueState(sap.ui.core.ValueState.None); oInput.setTooltip(' '); } }); if(error){ return error; } });