Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Formatting the Data Validation Error Message

Page of 168

You can change the location of the where the validation message appears on-screen by modifying the msgTarget property as described below:

Property Description
qtip Display a quick tip containing the message when the user hovers over the field. This is the default.
title Display the message in a default browser title attribute popup.
under Add a block div beneath the field containing the error message.
side Add an error icon to the right of the field, displaying the message in a popup on hover.
none Don't display any error message. This might be useful if you are implementing custom error display.
[element id] Add the error message directly to the innerHTML of the specified element.
Different msgTarget options
{
 xtype: 'textfield',
 name: 'name',
 fieldLabel: 'Name',
 allowBlank: false,  
 msgTarget: 'side'
}, 
{
 xtype: 'textfield',
 name: 'email',
 fieldLabel: 'Email Address',
 vtype: 'email', 
 allowBlank: false,
 msgTarget: 'under'
},
{
 xtype: 'textfield',
 name: 'ssn',
 fieldLabel: 'Soc. Sec #',
 allowBlank: false,
 regex : /^\d{3}-\d{2}-\d{4}$/,
 msgTarget: 'title'
}

If desired, you can also remove the red squiggly line that appears on invalid fields by including the following CSS definition in your style sheet:

.x-form-invalid-field,textarea.x-form-invalid-field{
  background-image: none;
}
Page of 168
comments powered by Disqus