Unsolved 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) } }
-
@daka said in hot to reference to the bordercolor?:
I assume for this one ?
TextField {
id: firstnamethen:
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" }