Trying to validate a pizza order form… how can I place a red asterisk beside the tab name: Contact Info or Order Info if a field input is missing. So, if a user forgets to put in his credit card expiration date, a red asterisk should display next to Order Info to indicate there is a field missing on that tab.
webix.ui({
container:“areaA”,
view:“form”,
id:“orderform”,
width:450,
margin:0,
padding:0,
scroll:false,
borderless:true,
elements:[{
view:“tabview”,
tabbar:{ options:[“Contact Info”,“Order Info”]}, animate:false,
cells:[
{ id:“Contact Info”, rows:[
{ rows:[
{ view:“text”, name:“name”, label:“Name”, value:"", labelWidth:155},
{ view:“text”, name:“address”, label:“Address”, value:"", labelWidth:155 },
{ view:“text”, name:“phonenum”, label:“Phone Number”, value:"", labelWidth:155 }
]}
]},
{ id:“Order Info”, visibleBatch:“Credit Card”, rows:[
{ view:“richselect”, name:“ordertype”, label:“Pizza Order”, labelWidth:155, value:“Which Pizza Do You Want?”, options:[“Pizza + Single Topping”,“Pizza + Two Toppings”,“Pizza + Three Toppings”,“Pizza Dinner Package”]},
{ view:“radio”, name:“payment”, label:“Payment By” , labelWidth:155, value:“Credit Card”, options:[“Credit Card”,“Paypal”], click:function(){
$$(“Order Info”).showBatch(this.getValue());}
},
{ view:“text”, batch:“Credit Card”, name:“ccname”, label:“Credit Card Name”, labelWidth:155},
{ view:“text”, batch:“Credit Card”, name:“ccnumber”, label:“Credit Card Number”, labelWidth:155},
{ view:“text”, batch:“Credit Card”, name:“ccexpire”, label:“Expiration Date”, labelWidth:155},
{ view:“text”, batch:“Paypal”, name:“pp”, label:“Paypal Email”, labelWidth:155}
]}
]
},
{
view:“form”, width:200, scroll:false,
cols:[
{ view:“button”, label:“Submit”, height:30, width:100, click:function(){
if ($$(‘orderform’).validate()) {
webix.alert(“ORDER HAS BEEN PLACED.”);
}
else
webix.alert({ type:“error”, text:“INFORMATION MISSING.” });
}}
]
}
],
rules:{
name: webix.rules.isEmail,
phonenum: webix.rules.isNotEmpty,
address: webix.rules.isNotEmpty,
ccname: webix.rules.isNotEmpty,
ccnumber: webix.rules.isNotEmpty,
ccexpire: webix.rules.isNotEmpty,
pp: webix.rules.isEmail
}
});