---
title: "How to create a window form with validation in extjs"  
description: "How to create a window form with validation in extjs"  
author: "Elena Glibart"  
published: 2016-11-24  
updated: 2016-11-24  
canonical: https://www.mindstick.com/forum/34210/how-to-create-a-window-form-with-validation-in-extjs  
category: "sencha extjs"  
tags: ["sencha"]  
reading_time: 3 minutes  

---

# How to create a window form with validation in extjs

Hi Buddy\
I am currently working in sencha [extjs](https://www.mindstick.com/forum/34106/how-to-use-extjs-grid) application.I have [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) during [creation](https://yourviews.mindstick.com/view/85506/what-was-the-causes-of-creation-of-pakistan) a [window form](https://www.mindstick.com/forum/419/how-to-pass-data-from-one-window-form-to-another).Please help me .I would really appreciate your help.\
Thanks

## Replies

### Reply by Abhishek Srivasatava

Hi Elena,

\

For windows form, you need a button after which [window](https://www.mindstick.com/forum/161285/how-does-the-window-console-object-work-in-javascript) form will be pop.

\
**\
Example :** \

```
 xtype: 'button',                            text: 'Register',                            listeners: {                                click: function() {                                                                     Registwin.show();                                }                             }
```

Here is the code to create windows application in Sencha ExtJS. Please review it and let us know if any updates are required.\
\

```
 Ext.onReady(function () {                   Registwin = new Ext.Window({ // Creating login window                        xtype: 'UserForm',                       modal: true,                       closeAction: 'close',                       layout: 'fit',                       height: 300,                       width: 400,                       title: 'Register',                       items: [                           {                               xtype: 'form',                               bodyPadding: 5,                               items: [                                   {                                       xtype: 'fieldset',                                       title: 'Fill The Details',                                        defaults: {                                           xtype: 'textfield',                                           labelWidth: 100,                                           maxLength: 10,                                           enforceMaxLength: true,                                           width: 300                                        },                                       items: [                                            {                                               labelSeparator: '',              // It is used to add fieldLabel and textbox                                               fieldLabel: 'Name',                                               name: 'Name',                                                                  maxLength: 10,                // It will show error after 10 digit                                               enforceMaxLength: true,   // Used so that user cannot enter the value whose text length is greater than 10.                                               allowBlank: false,            // Putting validation so that this fieldwill be manadatory.                                               msgTarget: 'under'         // Place Where we need to error message.                                             },                                           {                                               fieldLabel: 'Email',                                               labelSeparator: '',                                               name: 'UserEmail',                                               maxLength: 20,                                                                vtype :'email',                   // Putting validation so that input will be email type only.                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                           },                                           {                                               fieldLabel: 'Phone',                                               name: 'PhoneNumber',                                               labelSeparator: '',                                               maskRe: /[0-9]/,              //Textbox will accept only 0-9character                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                            },                                           {                                               labelSeparator: '',                                               fieldLabel: 'Address',                                               name: 'Address',                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                           },                                              {                                               xtype: 'datefield',                                               fieldLabel: 'Date of birth',                                               name: 'DOB',                                               labelSeparator: '',                                               format: 'd/m/Y',              // Putting validation for user input must be date month and year.                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                           },                                           {                                               fieldLabel: 'Password',                                               name: 'Password',                                               id: 'pass1',                                               labelSeparator: '',                                               inputType: 'password', //User input will be hidden,show only *                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'Under'                                           }                                        ]                                   }                               ],                               buttons: [                                   {                                       text: 'Save',                                       action: 'saveUser',
//Above validation is used to show error message but we need to put validation on button otherwise after clicking on button wrong data will be processded successfully. We need to show error message after clicking on click button. So below is the code to check all form validation.                                       listeners: {                                           click: function (button) {                                               var form = button.up('form');                                               if (form.isValid()) {                                                   Ext.Msg.alert('Succcess', 'Thanks For Register !')                                               }                                               else                                               {                                                   Ext.Msg.alert('Error', 'Please fill valid data !')                                                }                                               }
                                           }

                                         }
                                      ]}}
```

```

```


---

Original Source: https://www.mindstick.com/forum/34210/how-to-create-a-window-form-with-validation-in-extjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.