Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

hot to reference to the bordercolor?



  • 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)
                    }
                }
    

  • Moderators

    @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"



  • @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"
    }
    

Log in to reply