Question

I use a custom AJAX vtype, which works and all.
However I notice the extjs docs note that

“Note: this method does not cause the Field’s validate or isValid methods to return false if the value does pass validation. So simply marking a Field as invalid will not prevent submission of forms submitted with the Ext.form.action.Submit.clientValidation option set.”

How does one mark a field as invalid so that form.isValid() returns false?
My vtype:

Ext.apply(Ext.form.VTypes, {
username: function(value, field){        
    var conn = new Ext.data.Connection();
    conn.request({
        url: 'test.php',
        params:{email:value},
        method: 'POST',

        success: function(responseObject){
            var resp = responseObject.responseText;
            if (resp == 0) {
                field.markInvalid('This email is invalid or already registered!');                
            } else if (resp == 1) {
                field.clearInvalid();
            }
        },
        failure: function(){                
           Ext.Msg.show({title: 'Error', msg: 'Connection error!',});
        }
    });
    return true;
}
});

Answer 1

Well, if you look at the definition of clientValidation:

Determines whether a Form’s fields are validated in a final call to
isValid prior to submission. Pass false in the Form’s submit options
to prevent this. If not defined, pre-submission field validation is
performed.

This is basically saying, if its set to false then the form will be automatically validated prior to submission… at which point it will fail if you have marked any fields as invalid. If you set it to true then you need to manually check if the form is valid before submitting.

It’s worth pointing out that your AJAX vtype is never going to work. When the form calls the vtype to check whether the field is valid, all it gets in response is true… so the form submits no matter what. Even if you tell it to return after the ajax request has completed, the form would submit before the vtype ajax request completes.

A better solution would be to include the call to the vtype manually in your submit button handler…then in your success of the ajax request just do

if(form.isValid()) {
   form.getForm().submit();
}

This will force the submit button’s click event to first validate the username field and then, and only then, will it submit the form.