[CLOSED] 4.1.0 - Ext.data.field.Field.validation function ignores input parameters

[sveins12]

It seems that the validate function that ships with Ext.NET 4.1.0 is totally different from the one in ExtJs.

It ignores all the inputparameters and a lot of functionality is lost:

	// Code from ext.axd?v=4.1.0:97335:
	Ext.define('Ext.form.field.Field', {
	  validate: function() { ... }
	});

	// ExtJs:
	Ext.define('Ext.data.field.Field', {
	  validate: function(value, separator, errors, record) { ... }
	});

[fabricio.murta]

Hello @sveins12!

Where did you get that from? which version? Ext.NET 4.1.0 has ExtJS 6.0.2. A link from where you got that code snipped would be really appreciated.

Here's what I see when I look at the method's source from Sencha website docs:

    /**
     * Returns whether or not the field value is currently valid by {@link #getErrors validating} the field's current
     * value, and fires the {@link #validitychange} event if the field's validity has changed since the last validation.
     * **Note**: {@link #disabled} fields are always treated as valid.
     *
     * Custom implementations of this method are allowed to have side-effects such as triggering error message display.
     * To validate without side-effects, use {@link #isValid}.
     *
     * @return {Boolean} True if the value is valid, else false
     */
    validate : function() {
        return this.checkValidityChange(this.isValid());
    },

Check it out on this address: http://docs.sencha.com/extjs/6.0.2-c...ethod-validate
Redirected from docs at: Ext.form.field.Field - ExtJS 6.0.2 docs.

I hope this helps!

[sveins12]

Oh sorry, my bad. The Sencha code was from Ext.data.field.Field and not Ext.form.field.Field.

But then how could I get the error messages added to a collection when validating a field, is it even possible?

[fabricio.murta]

Hello @sveins12! That seems pretty possible... Can you point a sample in examples explorer or provide a simple example reproducing the exact situation so we can work on top of it? It would be much easier if we could elaborate on an actual test case.

[sveins12]

Here is some code. I know there is some built in functionallity using a FormPanel, but in my scenario I don't have a FormPanel, so I wonder if there is a way to get all the validation messages using the fields' validation functions directly. It would also be good if there was a way to show the validation messages beside the field when it is marked as invalid. The way it is now, the validation messages are shown on mouse-over:

@{
    var x = Html.X();    
}

@(
    x.Panel()
        .Title("Test validation")
        .Layout(LayoutType.Form)
        .Items(
            x.NumberField()
                .AllowBlank(false)
                .BlankText("BlankText1")
            ,
            x.NumberField()
                .AllowBlank(false)
                .BlankText("BlankText2")
        )
        .Buttons(
            x.Button()
                .Text("Validate")
                .Handler(@"

                    var messages =  []; // Validation messages should be pushed to this array.
                    var errors = 0; 

                    this.up('panel').items.each(function(field){
                        if( !Ext.isFunction(field.validate) ) 
                            return;
                       
                        // If field was a Ext.data.field.Field we could 
                        // do something like field.validate(value, null, messages) to fill up messages.
                        // But Ext.form.field.Field's validate function has no parameters for that:

                        if( !field.validate() )
                            errors++;   
                                                                           
                    });
                    if( errors>0 )
                        Ext.Msg.info({html:'Invalid fields: ' + errors});
                    else
                        Ext.Msg.info({html:'Everything is OK'});
                ")
        )
)

[fabricio.murta]

Hello @sveins12!

Splendid sample code! I have changed some things on it and will post it back below.

In summary:
- FormLayout takes out a lot of customization you can do in forms. If you are not happy with the position of stuff and using FormLayout, you should switch to something else and experiment until it looks good for you. For insights on this issue, please look up the form examples in our examples explorer. This is a good starting point: FormPanel validation.
- You can get the error message from your script code if you inspect field.activeErrors object/array.
- You can position the validity message in spite of a given field by the MsgTarget setting.

The MsgTarget can refuse to show the message where you ask it for if you are using the Form layout. In this case you can either switch the entire view to another layout, or wrap the field inside a container with a less intrusive layout like, maybe, VBox.

And here's the code I came up with:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>c61225_Index</title>
    <script type="text/javascript">
        var clickHandler = function (me) {
            var messages = []; // Validation messages should be pushed to this array.
            var errors = 0;

            me.up('panel').items.each(function (field) {
                if (!Ext.isFunction(field.validate))
                    return;

                // If field was a Ext.data.field.Field we could 
                // do something like field.validate(value, null, messages) to fill up messages.
                // But Ext.form.field.Field's validate function has no parameters for that:
                if (!field.validate()) {
                    errors++;
                    messages.push(field.activeErrors[0]);
                }
            });

            if (errors > 0)
                Ext.Msg.info({ html: 'Invalid fields: ' + errors + ' msgs: ' + messages.join('//') });
            else
                Ext.Msg.info({ html: 'Everything is OK' });
        }
    </script>
</head>
<body>
    <div> 
@{
    var x = Html.X();
}
        @x.ResourceManager()
@(
 x.Panel()
        .Title("Test validation")
        .LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
        .Items(
            x.NumberField()
                .AllowBlank(false)
                .ID("nf1")
                .BlankText("BlankText1")
                .MsgTarget(MessageTarget.Under)
            ,
            x.NumberField()
                .AllowBlank(false)
                .BlankText("BlankText2")
                .MsgTarget(MessageTarget.Under)
        )
        .Buttons(
            x.Button()
                .Text("Validate")
                .Handler(@"clickHandler(this)")
        )
)
    </div>
</body>
</html>

I hope this helps! Remember, browser debugger is your friend to investigate the data structures and get the information you need/want.

[sveins12]

Perfect. Thank you!