check for type and required properties on submit

[christoph_buehlmann]

Dear Experts

I am new to SAPUI5 and playing around on a first form following the demokit: SAPUI5 SDK - Demo Kit

Unfortunately the demo kit does not explain me how to submit a form. So far I just added a button, but how can I achieve that a click on the button does:

- check if all the fields I marked as required are checked for content

- check if for example in an Input field with type 'emal' the entered text is really an email adress

- how can I then send the entered texts to an emailadress like: abc@123.com ?

Thanks for some hints!

Best regards

Christophe

Thats the code I use:

var oLayout1 = new sap.ui.layout.form.GridLayout();

  var oForm1 = new sap.ui.layout.form.Form("F1",{
   title: new sap.ui.core.Title({text: "Title", tooltip: "Feedback Form"}),
   width: '500px',
   layout: oLayout1,
   formContainers: [

new sap.ui.layout.form.FormContainer("F1C3",{
     /* title: "contact",  */
     expandable: false,
     formElements: [
                        new sap.ui.layout.form.FormElement({
                         label: "Text",
                         fields: [new sap.ui.commons.TextArea({placeholder: 'Your text goes here', rows: 10})]
                       
                        }),
      new sap.ui.layout.form.FormElement({
       label: "Phone",
       fields: [new sap.ui.commons.TextField({type: 'phone', required: true, placeholder: '+00 000 000 00 00'})]
    
      }),
      new sap.ui.layout.form.FormElement({
       label: "Name",
       fields: [new sap.ui.commons.TextField({placeholder: 'Doe', required: true})]
     
      }),
      new sap.ui.layout.form.FormElement({
       label: "First Name",
       fields: [new sap.ui.commons.TextField({placeholder: 'John', required: true})]
    
      }),
      new sap.ui.layout.form.FormElement({
       label: "Email",
       fields: [new sap.ui.commons.TextField({type: 'email', required: true, placeholder: 'john.doe@123.com', layoutData: new sap.ui.layout.ResponsiveFlowLayoutData({weight: 4})})],

      }),
                       
                     new sap.ui.layout.form.FormElement({
   
       fields: [new sap.ui.commons.Button({text: 'Submit', type: 'submit', width: '150px', tooltip: 'Send this form', width: "3em", press:function(){oController.handleButtonClicked();}})]

      })

     ]
    
    }),

  ]
  });

  
      //Attach the panel to the page
   return oForm1;

}
});

[scott_stefanich · Accepted solution]

Hello Christoph,

Two samples may be helpful,

UrlHelper

Trigger email, telephone, and SMS.

Input – Checked

Uses min and max length constraint, value states, and input validation. It also includes a custom model type for validating email

Hope these help,

Scott Stefanich