Display form validation messages below the form and focus on the respective field

[janani_10]

Hi All,

I am trying to display the form validation messages below the form and on clicking a message i need to focus the corresponding field.

My view and Controller code are

view.xml

<content>
<sap.ui.layout.form:Form xmlns:sap.ui.layout.form="sap.ui.layout.form" editable="true" id="__form0">
<sap.ui.layout.form:formContainers>
<sap.ui.layout.form:FormContainer title="Details" id="__container1">
<sap.ui.layout.form:formElements>
<sap.ui.layout.form:FormElement label="Name" id="__element1">
<sap.ui.layout.form:fields>
<Input width="100%" id="name" required="true"/>
</sap.ui.layout.form:fields>
</sap.ui.layout.form:FormElement>
</sap.ui.layout.form:formElements>
</sap.ui.layout.form:FormContainer>
</sap.ui.layout.form:formContainers>
<sap.ui.layout.form:layout>
<sap.ui.layout.form:ResponsiveGridLayout id="__layout0"/>
</sap.ui.layout.form:layout>
</sap.ui.layout.form:Form>
<Button text="Submit" press="onPress" width="100px" id="button"/>
</content>

controller.js

onPress: function() {
	var a = this.getView().byId("name").getValue();
	if (a === "") {
		var msg = new sap.m.MessageStrip("id", {
			link: new sap.m.Link("linkid", {
				text: "EnterName",
				press: this.onClick
			})
		});
	this.getView().byId("form").addContent(msg);
	}
},
onClick: function(oEvent) {
       alert("Success");

 //sap.ui.getCore().byId("name").focus;--- error: focus() of undefined
		}

If i use ---this.getView().byId("name").focus();

in onClick() function I am getting error: this.getView is not a function

For sap.ui.getCore().byId("name").focus(); error: Cannot read property 'focus' of undefined

Please help me with this.

Thanks,

Janani

[mantrishekar]

Hi,

onPress:function(){

var a = this.getView().byId("name").getValue();

if(a ==="") {

var msg =new sap.m.MessageStrip("id", { link:newsap.m.Link("linkid", {text:"EnterName", press: this.onClick })});

this.getView().byId("form").addContent(msg);

}

},

Basically the error is due to this line

this.getView().byId("form").addContent(msg);

As the above line should be written after ending if condition.other wise this refers to if condition and throws error.

still if you want to write inside if condition modify the code as below.

onPress:function()

{

var that = this;

var a = this.getView().byId("name").getValue();

if(a ==="")

{

var msg =new sap.m.MessageStrip("id", { link:newsap.m.Link("linkid", {text:"EnterName", press: this.onClick })});

that.getView().byId("form").addContent(msg);

}

},

[Sharathmg]

Hello,

First, as a better practise try to display the message in-box using the "value-state" and "value state message".

Easy to implement and better UX practise. The one you are trying to send the control back to controller and populate a sepaarte control onto the page. This is resource intensive and affects performance.

The reason why you getting the error is: you are looking for this variable inside the error/success within the function. The context changes and many a times people move the the "this" variable into something called "that". Ex: var that = this;

However, you requirement is w.r.t messages and that should be fine with value-state option.

Regards,

Sharath

[Sharathmg]

Check the link: https://experience.sap.com/fiori-design-web/input-field/

[richard-zhao]

Hello Janani. Could you try to modify your input and button by using sap.m library tag? and press: this.onTest()

should be onTest() with parentheses. with all of this adjustment. It will work fine. thanks.

<m:Text text="hello"  width="auto" maxLines="3"  /> 
<m:Input width="100px" id="name" required="true" />
<m:Button text="Submit" press="onPress" width="100px" id="button"/>

onPress : function() {
	var a = this.getView().byId("name").getValue();
	if (a === "") {
		var msg = new sap.m.MessageStrip("id", {
			link: new sap.m.Link("linkid", {
				text: "EnterName",
				press: this.onTest()
			})
		});
	}
},

onTest : function() {
	console.log("good");
	this.getView().byId("name").focus();
}

[janani_10]

Hi Richard,

I have tried this.. But when I press submit button it's showing the below error.

Thanks,

Janani