<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="UTF-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
		data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-xx-bindingSyntax="complex"
		data-sap-ui-resourceroots='{
				"sap.ui.demo.wt": "./"
			}'>
	</script>
	<script>
				new sap.m.Shell("ShellId",{title: "InputError Demo",
					showLogout: false,
					app: new sap.ui.core.ComponentContainer({
						name: "sap.ui.demo.wt"		
					})
				}).placeAt("content");
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here

/* Styles go here */

jQuery.sap.declare("sap.ui.demo.wt.Component");  
sap.ui.core.UIComponent.extend("sap.ui.demo.wt.Component", {  
   createContent : function () {  
  // create root view  
	  var oView = sap.ui.view({  
		  id : "app",  
		  viewName : "sap.ui.demo.wt.Home",  
		  type : "JS",  
	  });  
	  
	var dataObject = [
				{Product: "Power Projector 4713", Weight: "33"},
				{Product: "Gladiator MX", Weight: "33"},
				{Product: "Hurricane GX", Weight: "45"},
				{Product: "Webcam", Weight: "33"},
				{Product: "Monitor Locking Cable", Weight: "41"},
				{Product: "Laptop Case", Weight: "64"}];
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			productsData : []
			}
			});
		oView.setModel(model);
		oView.getModel().setProperty("/modelData/productsData", dataObject); 
       
return oView;  
  }  
});  
sap.ui.jsview("sap.ui.demo.wt.Home", {  
  /** Specifies the Controller belonging to this View. 
  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller. 
  * @memberOf routingdemo.App 
  */  
  getControllerName : function() {  
  return "sap.ui.demo.wt.Home";  
  },  
  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
  * Since the Controller is given to this method, its event handlers can be attached right away. 
  * @memberOf routingdemo.App 
  */  
  createContent : function(oController) {  
  this.setDisplayBlock(true);  
	this.app = new sap.m.App("mainApp",{initialPage:"FirstPage"});

		var page = sap.ui.xmlview("FirstPage", "sap.ui.demo.wt.FirstPage");
		this.app.addPage(page);
  return this.app;  
  }  
});
sap.ui.controller("sap.ui.demo.wt.Home", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
//	onInit: function() {
//
//	},

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_sample.Home
*/
//	onBeforeRendering: function() {
//
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_sample.Home
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
//	onExit: function() {
//
//	}

});
<mvc:View
  controllerName="sap.ui.demo.wt.FirstPage"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns="sap.m">
<Page
    title="XML Fragment Eventing"
    class="marginBoxContent" >
  <content>
  <FlexBox
    alignItems="Start"
    justifyContent="Center">
      <items>
      <Button
        class="sapUiSmallMarginBottom" 
        text="Show Input"
        press="handleListPress"
        type="Emphasized" 
        icon="sap-icon://request"/>
      </items>
    </FlexBox>
 </content>
 </Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.wt.FirstPage", {

  onInit : function () {
    this.getView().setModel(new sap.ui.model.json.JSONModel({
      name : "",
      email : ""
    }));

    // attach handlers for validation errors
    sap.ui.getCore().attachValidationError(function (evt) {
      var control = evt.getParameter("element");
      if (control && control.setValueState) {
        control.setValueState("Error");
      }
    });
    sap.ui.getCore().attachValidationSuccess(function (evt) {
      var control = evt.getParameter("element");
      if (control && control.setValueState) {
        control.setValueState("None");
      }
    });
  },
  
  handleListPress:function(){
      this._oDialog = sap.ui.xmlfragment("sap.ui.demo.wt.Dialog", this);
      this._oDialog.setModel(this.getView().getModel());

    // toggle compact style
    jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
    this._oDialog.open();
},

  handleContinue : function (evt) {

    // collect input controls
    var view = this.getView();
    var inputs = [
      view.byId("nameInput"),
      view.byId("emailInput")
    ];

    // check that inputs are not empty
    // this does not happen during data binding as this is only triggered by changes
    jQuery.each(inputs, function (i, input) {
      if (!input.getValue()) {
        input.setValueState("Error");
      }
    });

    // check states of inputs
    var canContinue = true;
    jQuery.each(inputs, function (i, input) {
      if ("Error" === input.getValueState()) {
        canContinue = false;
        return false;
      }
    });

    // output result
    if (canContinue) {
      sap.m.MessageToast.show("The input is correct. You could now continue to the next screen.");
    } else {
      jQuery.sap.require("sap.m.MessageBox");
      sap.m.MessageBox.alert("Complete your input first.");
    }
  },
  
  /**
   * This is a custom model type for validating email
   */
  typeEMail : sap.ui.model.SimpleType.extend("email", {
    formatValue: function (oValue) {
      return oValue;
    },
    parseValue: function (oValue) {
      //parsing step takes place before validating step, value can be altered
      return oValue;
    },
    validateValue: function (oValue) {
      // The following Regex is NOT a completely correct one and only used for demonstration purposes.
      // RFC 5322 cannot even checked by a Regex and the Regex for RFC 822 is very long and complex.
      var mailregex = /^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/;
      if (!oValue.match(mailregex)) {
        throw new sap.ui.model.ValidateException("'" + oValue + "' is not a valid email address");
      }
    }
  })
});
<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">
  <Dialog
    title="Select Input" >
    <content>
<VBox id="oVBox">
<Label text="Name" />
      <Input
        id="nameInput"
        class="sapUiSmallMarginBottom"
        type="Text"
        placeholder="Enter Name ..."
        valueStateText="Name must not be empty. Maximum 10 characters."
        value="{
          path : '/name',
          type : 'sap.ui.model.type.String',
          constraints : {
            minLength: 1,
            maxLength: 10
          }
        }" />
      <Label text="EMail" />
      <Input
        id="emailInput"
        class="sapUiSmallMarginBottom"
        type="Email"
        placeholder="Enter EMail ..."
        valueStateText="EMail must be a valid email address."
        value="{
          path : '/email',
          type : '.typeEMail'
        }" />

      <Button
        text="Continue"
        press="handleContinue" />
  </VBox>
  </content>
  </Dialog>
</core:FragmentDefinition>