Skip to Content

check for type and required properties on submit

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;

}
});

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Sep 10, 2014 at 04:15 PM

    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

    Add comment
    10|10000 characters needed characters exceeded