extjs4 server side validation,how to?

Question

i have a form in extjs and i need to do some validation tests on it on server side and return a message error but i have no clue how to do this!

i need to verify if the new added ip adress already exists

i also need to verify if it is actually a valid adress (i have a c# function that can do this)

if these conditions are ok it can be added. if not, i'd like to show an error message to the user saying what is the problem

now when i call my save button submit,i do these tests on my c# before i do the insert query, but even if those tests arent ok it still say success on the form because i dont know how to tell extjs4 there is an error

edit this is what im trying to do up to now

my form submit:

this.up('form').getForm().submit
({
    url: 'AddData.ashx',
    params: { action: 'addip' },
    success: function (form, action) {
        Ext.MessageBox.show({ title: 'Success !',
            msg: 'IP added successfully<br />',
            icon: Ext.MessageBox.INFO,
            buttons: Ext.MessageBox.OK
        });

        Ext.getCmp('addipform').getForm().reset();
    },
    failure: function (form, action) {
        switch (action.failureType) {
            case Ext.form.action.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.action.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.action.Action.SERVER_INVALID:
                Ext.Msg.alert('Failure', action.result.msg);
        }
    }
})

inside my AddData.ashx there is a function addip() which get called when action param is 'addip' this function return :

public string addip()
{
   //my queries ...
   string result = new JavaScriptSerializer().Serialize("{    success:false,  errors:{    text:\"The IP already exist!\",  ip:\"The is not an IP !\"  }  }");
   return result;
}

but nothing happens!

Answer 1

Assuming that you are submitting your form to C#, once you have performed the validations and if those validations fail, then you will have to output JSON in following format:

{
    success:false,
    errors:{
        field1:errorMsg1,
        field2:errorMsg2
    }
}

Here, field1 is the name of the field present in your form at which you want to display the error.

You will have to output this JSON from your server side, the way you do when you respond to an Ajax request and this will itself mark the required field as invalid and show the errror message on mouse over of field.

Hope this helps.

Answer 2

Before you have it up and running, please make sure you already have pages that can serve the queries similar to these calls:

Request: http://localhost/verify.aspx?ip=192.168.0.1
Response: {success: true, message: "The IP is correct"} //you can pass as much items as you want here

Request: http://localhost/verify.aspx?ip=127.0.0.1
Response: {success: false, message: "The IP is already exist!"}

That sounds simple right?

Then in your ExtJS, you can have code like this (Pardon if there is any syntax error, haven't test it yet)

var w = Ext.create('Ext.window.Window', {
    width: 300,
    height: 250,
    items: Ext.create('Ext.form.Panel', {
        items: [{
            xtype: 'textfield',
            fieldLabel: 'IP'
        }]
    }),
    buttons: [{
        text: 'Save',
        handler: function() {
            var ip = w.down('textfield').getValue();

            //Some client side validation first
            //then we submit it

            //Use Ajax request          
            Ext.Ajax.request({
                url: 'http://localhost/verify.aspx?ip='+ip,
                success: function(r) {

                    //r is the raw response object, we need to parse it
                    var res = Ext.decode(r.responseText, true);

                    //Then here we are. We can check the transaction
                    //status. This is the exact object you passed
                    //in the above Request-Response pair.
                    if (res.success) {
                        //ip is correct. Do your other stuff here
                    }else{
                        //ip is incorrect. You may want to show the error message
                        alert(res.message);
                    }

                }
            }); 
        }
    }]
});

Disclaimer: This is just a simple example, I hope it helps :)