Use separate function as the validation function : Form Validation « Ext JS « JavaScript DHTML






Use separate function as the validation function

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
Ext.QuickTips.init();

var formPanelItems =[
   {
      fieldLabel : 'URL',
      allowBlank : false,
      vtype      : 'urlOnly',
    msgTarget  : 'title'
    
   }
];

var myValidFn = function(v) {
   var myRegex = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
   return myRegex.test(v);
}

Ext.apply(Ext.form.VTypes, {
    urlOnly     : myValidFn,
    urlOnlyText : 'Must a valid web url'
});

var fp = new Ext.form.FormPanel({
   renderTo     : Ext.getBody(),
   width        : 400,
   title        : 'Title here',
   height       : 170,
   frame        : true,
   bodyStyle    : 'padding: 5px',
   monitorValid : true,
   monitorPoll  : 50, 
   labelWidth   : 125,   
   defaultType  : 'textfield',
   defaults     : {
      msgTarget : 'side',
      anchor    : '-20'
   },
   items        : formPanelItems,
});



});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

   
    
  








Related examples in the same category

1.Mark a form field as required
2.Set mask regular expression
3.Define your own validation type
4.Customize your own message for validation
5.Set strip character regular expression
6.Set alert message for empty input
7.Create customized validation function for field
8.Define validation type
9.Advanced Validation Examples Using VTypes