How to check few form fields are empty or not?

问题:

I am using ExtJS 3.4.0

I have a form in "var new" variable that comes to Ext.Window().

I need to do code that checks between textfield and textarea is one of them empty or not.

I mean if textfield is empty and textarea is not then form data can be submitted vice versa.

This code must be placed to the code that starts like below:

newform
.getForm()
.submit(

回答1:

I hope you can find in my example

Ext.onReady(function(){


var newForm=Ext.create('Ext.form.Panel',{

            title:"Form",
            items:[
                  {
                   xtype:"textfield",
                   fieldLabel:"Name"
                  },
                  {
                        xtype     : 'textareafield',
                        name      : 'message',
                        fieldLabel: 'Message'

                    }

                  ],
            renderTo:document.body
  });

              var win= new Ext.Window
                    ({
                     title:"Window",
                     layout:'fit',
                     height:250,
                     width:300,
                     items:[newForm],
                     buttons:[
                              { 
                               text:"Submit",
                               handler:function(){
                                 var textFieldValue=newForm.items.items[0].getValue();
                                 var textAreaValue=newForm.items.items[1].getValue();
                                 if(textFieldValue!=""||textAreaValue!=""){
                                   alert("you can submit the data");
                                   }
                                   else{
                                   alert("you can't submit the data");
                                   }
                                }
                              }
                             ]
                   }).show();

});

回答2:

The following example shows a form with textfield and text area. Both are mandatory.

allowBlank::Specify false to validate that the value's length must be > 0. If true, then a blank value is always taken to be valid regardless of any vtype validation that may be applied.

validate() : Boolean Returns whether or not the field value is currently valid by validating the field's current value, and fires the validitychange event if the field's validity has changed since the last validation. Note: disabled fields are always treated as valid.

See an example in:http://docs.sencha.com/extjs/6.2.0/classic/Ext.form.Panel.html#ext-form-panel_example-usage

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false,
        validator: function(val) {
            return (val.trim().length > 0) ? true : "This field may not be empty";
        }
    }, {
        xtype: 'textarea',
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false,
        validator: function(val) {
            return (val.trim().length > 0) ? true : "This field may not be empty";
        }
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});