Customize your own message for validation : Form Validation « Ext JS « JavaScript DHTML






Customize your own message for validation

  
<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.Use separate function as the validation function
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