Trying to the following for the code below (when the submit button is clicked)
- display an asterisk next to the tabs: Personal Info , Contact Info, Payment Info to indicate to users there is something missing.
- in name:businesstype3, Choose One should make the user select the other options, so how can I validate this (ie. Choose One is not valid).
- in Payment Info, needing a custom validation for the batch options… for example, payment method: paypal was selected, then only validate name:paypalemail3 and disregards the other batch fields of batch:Check and batch:Wire…
webix.ui({
container:“areaA”,
view:“form”,
scroll:false,
width:600,
margin:0,
padding:0,
id:“form1”,
borderless:true,
elements:[{
view:“tabview”,
tabbar:{ options:[“Personal Info”,“Contact Info”,“Payment Info”]}, animate:false,
cells:[
{ id:“Personal Info”, rows:[
{ rows:[
{ view:“text”, name:“emailaddr1”, label:“Email Address”, value:"", labelWidth:155},
{ view:“text”, name:“firstname1”, label:“First Name”, value:"", labelWidth:155},
{ view:“text”, name:“lastname1”, label:“Last Name”, value:"", labelWidth:155}
]}
]},
{ id:“Contact Info”, rows:[
{ rows:[
{ view:“text”, name:“firstname2B”, label:“First Name”, value:"", labelWidth:155},
{ view:“text”, name:“lastname2B”, label:“Last Name”, value:"", labelWidth:155 },
{ view:“text”, name:“phonenum2B”, label:“Phone Number”, value:"", labelWidth:155 },
{ view:“text”, name:“emailaddr2B”, label:“Email Address”, value:"", labelWidth:155 }
]}
]},
{ id:“Payment Info”, visibleBatch:“Check”, rows:[
{ view:“richselect”, name:“businesstype3”, label:“Business Type”, labelWidth:155, value:“Choose One”, options:[“Online”,“Banking”,“Entertainment”,“Technology”, “Engineering”, “Civil Service”, “Non-profit/Government”,“Other”]},
{ view:“radio”, name:“paymentmethod3”, label:“Payment Method” , labelWidth:155, value:“Check”, options:[“Check”,“Paypal”,“Wire”], click:function(){
$$(“Payment Info”).showBatch(this.getValue());}
},
{ view:“text”, batch:“Check”, name:“checkbankname3”, label:“Bank Name”, labelWidth:155},
{ view:“text”, batch:“Check”, name:“checkrouting3”, label:“Routing Number”, labelWidth:155},
{ view:“text”, batch:“Check”, name:“checkaccount3”, label:“Account Number”, labelWidth:155},
{ view:“text”, batch:“Paypal”, name:“paypalemail3”, label:“Paypal Email”, labelWidth:155},
{ view:“text”, batch:“Wire”, name:“wirebankname3”, label:“Bank Name”, labelWidth:155},
{ view:“text”, batch:“Wire”, name:“wirebankaddress3”, label:“Bank Address”, labelWidth:155},
{ view:“text”, batch:“Wire”, name:“wireacctnum3”, label:“Account Number”, labelWidth:155},
]}
]
},
{
view:“form”, width:200, scroll:false,
cols:[
{ view:“button”, label:“Submit”, height:30, width:100, click:function(){
if ($$(‘form1’).validate()) {
webix.message(“Form has been validated.”);
webix.ajax().post(
“postform.php”,
$$(“publisherCreateForm”).getValues(),
function(text){
//show server side response
webix.message(text);
}
);
}
else
webix.message({ type:“error”, text:“Form is NOT complete.” });
// onAfterValidation takes care of displaying missing/invalid field inputs
}}
]
}
],
rules:{
“emailaddr1”: webix.rules.isEmail,
“firstname1”: webix.rules.isNotEmpty,
“lastname1”: webix.rules.isNotEmpty,
“firstname2B”: webix.rules.isNotEmpty,
“lastname2B”: webix.rules.isNotEmpty,
“phonenum2B”: webix.rules.isNotEmpty,
“emailaddr2B”: webix.rules.isEmail,
“businesstype3”: webix.rules.isNotEmpty,
“paymentperiod3”: webix.rules.isNotEmpty,
“paymentterms3”: webix.rules.isNotEmpty,
“paymentmethod3”: webix.rules.isNotEmpty
}
});