gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

After load form and the first running function in the 'events > change' in the select field the validation stops work #774

Open typo3ua opened 1 year ago

typo3ua commented 1 year ago

I have simple form...

$(document).ready(function() { 
    var data = {
        "actionReal": "One or Two",
        "firstName": "First Name",
        "lastName": "Last Name"
    };
    var schema = {
        "title":"Form title",
        "type":"object",
        "properties": {
            "actionReal": {
                "type": "string",
                "required": true,
                "default": "none"
            },
            "firstName": {
                "required": true
            },
            "lastName": {
                "required": true
            }
        }
    };
    var options = {
        "fields": {
            "actionReal": {
                "type": "select",
                "label": "Your action",
                "noneLabel": "Select action...",
                "dataSource": [
                    {
                        "value": "one",
                        "text": "Action One"
                    },
                    {    
                        "value": "two",
                        "text": "Action Two"
                    }
                ],
                "events": {
                    "change": function() {
                        var firstName = this.parent.childrenByPropertyId["firstName"],
                            lastName = this.parent.childrenByPropertyId["lastName"];
                        actionReal = this.getValue();
                        if (actionReal === 'one') {
                            firstName.options.label = "First Name Action One";
                            lastName.options.label = "Last Name Action One";
                        } else {
                            firstName.options.label = "First Name Action Two";
                            lastName.options.label = "Last Name Action Two";
                        }
                        firstName.refresh();
                        lastName.refresh();
                    }
                },
                "removeDefaultNone": false,
                "validate": true
            },
            "firstName": {
                "type": "text",
                "label": "First Name Action Two",
                "validate": true
            },
            "lastName": {
                "type": "text",
                "label": "Last Name Action Two",
                "validate": true
            }
        },
    };
    $("#form").alpaca({
            "data": data,
            "schema": schema,
            "options": options,
            "type": "create"
    });
});

When I selected in the field Your action the value Action one the validation stops work, but when I selected in the field Your action another value then the validation works well... Can someone tell me what is wrong in my form?

Guys I need your help in resolve the issue, please.