Skip to Content
0

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

Nov 24, 2017 at 05:46 AM

54

avatar image

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

10 |10000 characters needed characters left characters exceeded

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);

}

},

0
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Sharath M G Dec 27, 2017 at 07:59 AM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded
0
Richard Zhao
Dec 22, 2017 at 07:15 AM
0

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();
}
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Richard,

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

Thanks,

Janani

error.png (33.7 kB)
0