hot to reference to the bordercolor?

[daka]

Im trying to reference the bordercolor with the function: function validateTextField

function validateTextField(id, idError, borderColor) {
        id.style.TextFieldStyle.background.border.color = "red"
}

As I can see it doesn't work like this. Any help how to reference to the border color?

TextField {
                id: firstname
                Layout.minimumWidth: 300
                selectByMouse: true
                placeholderText: qsTr("type here your firstname")
                style: TextFieldStyle {
                    textColor: createRoot.textFieldColor
                    background: Rectangle {
                        radius: 5
                        border.color: createRoot.firstnameBorderColor
                        border.width: 1
                        color: createRoot.colorDefault
                    }
                    placeholderTextColor: createRoot.placeholderTextFieldColor
                }
                validator: RegExpValidator {
                    regExp: /[A-Z a-z 0-9]+/
                }
                focus: true

                onFocusChanged: {
                    createRoot.validateTextField(firstname, firstnameError)
                }
            }

[J.Hilk]

@daka said in hot to reference to the bordercolor?:

I assume for this one ?

TextField {
id: firstname

then:

function validateTextField(id, idError, borderColor) {
firstname.border.color = "red"
}

actually, no the background is an Item, that has no border property

you're using QuickControls 1 ?

I'm not sure with this one, I would say give your background rect an id, e.g. backgroundRect

and than you could simply use
backgroundRect.border.color = "red"

[lemons]

@daka said in hot to reference to the bordercolor?:

validateTextField(id, idError, borderColor) {
id.style.TextFieldStyle.background.border.color = "red"
}

First of all you could do it automatically by property binding, as the TextField has a property "acceptableInput":

TextField {
    id: firstname
    Layout.minimumWidth: 300
    placeholderText: qsTr("type here your firstname")
    activeFocusOnPress: true

    background: Rectangle {
        radius: 5
        border.color: firstname.acceptableInput ? "green" : "red"
        border.width: 1
    }
    validator: RegExpValidator {
        regExp: /[A-Z a-z 0-9]+/
    }
}

In case you want to stick to the validation function, you could do it e.g. like this:

TextField {
    id: firstname
    Layout.minimumWidth: 300
    placeholderText: qsTr("type here your firstname")
    activeFocusOnPress: true

    background: Rectangle {
        radius: 5
        border.color: "gray"
        border.width: 1
    }
    validator: RegExpValidator {
        regExp: /[A-Z a-z 0-9]+/
    }
    // pass the current element and validation
    // (validation could be addressed from the passed element as well)
    onFocusChanged: validateTextField(this, acceptableInput)
}

/*  validation function */
function validateTextField(el, valid) {
    el.background.border.color = valid ? "green" : "red"
}