How to change textfield property from 'onEditingFinished' in Qt QML - qt

Question

I am trying to alter the border color and width of my TextField depending on a vaildation check (javascript function that returns true if OK). If the user enters an invalid date of birth I wish to colour the Textfield box border red. Here is my qml definition:
TextField{
id: dob
placeholderText: qsTr("dd-mm-yyyy")
font.pixelSize: 14
Layout.fillWidth: true
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
id:dobstyle
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "black"
border.width: 1
}
}
inputMethodHints: Qt.ImhDate
onActiveFocusChanged: {
inputMask= "00-00-0000"
}
onEditingFinished: {
var datesplit = dob.text.split("-");
var jsDOB = new Date(datesplit[2],datesplit[1]-1,datesplit[0]);
var logichk = (isValidDateLogical(jsDOB));
var validchk = (isValidDate(dob.text))
if(!validchk || !logichk)
{
dobstyle.border.color="red"
dobstyle.border.width=3
}
}
selectByMouse: true
}
I am getting 'ReferenceError: dobstyle is not defined' Any idea how best to achieve this?

Answer 1

TextFieldStyle is a component, and what is inside does not exist for outside, what you must do is create a property in the TextField and make a binding, then only modify the property:
...
Layout.fillWidth: true
property color bordercolor: "black" // <---
property int borderwidth: 1 // <---
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
id:dobstyle
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: dob.bordercolor // <---
border.width: dob.borderwidth // <---
}
}
...
onEditingFinished: {
var datesplit = dob.text.split("-");
var jsDOB = new Date(datesplit[2],datesplit[1]-1,datesplit[0]);
var logichk = isValidDateLogical(jsDOB));
var validchk = (isValidDate(dob.text))
if(!validchk || !logichk)
{
dob.bordercolor ="red" // <---
dob.borderwidth = 3 // <---
}
}