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

Validating Input Data

Page of 168

Typically you will want to define at least one of the following validation rules on text fields by specifying the following properties:

Property Description
allowBlank Specify false to validate that the length of the entered value is greater than zero.
maxLength Sets the maximum length of input data.
minLength Sets the minimum length of input data.
regex A JavaScript RegExp object to be tested against the field value during validation. Note that this validation rule will not produce a visible error unless the regexText property is also configured.
validator A custom validation function to be called during field validation. Return true if the value is valid. Otherwise return false.
vtype A validation type name. Built-in validations include alpha, alphanum, email, and url. You can extend the Ext.form.VTypes class to define custom validators.

By default, validation checks occur on keyup.

The following code snippet illustrates placing validation rules on text fields:

{
 xtype: 'form',
 items: [
  {
   xtype: 'textfield',
   name: 'name',
   fieldLabel: 'Name',
   allowBlank: false  // requires a non-empty value
  }, 
  {
   xtype: 'textfield',
   name: 'email',
   fieldLabel: 'Email Address',
   vtype: 'email', // requires valid email format
   allowBlank: false
  },
  {
   xtype: 'textfield',
   name: 'ssn',
   fieldLabel: 'Soc. Sec #',
   allowBlank: false,
   regex : /^\d{3}-\d{2}-\d{4}$/
  }]
}

Preventing Form Submission

Applying the formBind: true attribute to your form's submit button will cause it to become disabled whenever any form fields fail data validation. Conversely, if all fields pass validation, the button will automatically become enabled.

Page of 168
comments powered by Disqus