💻
Programming Concept
  • 👨‍🔬About Me
  • 📗C++ STL Concept 2023
    • 📖STL in CPP ( Part I)
    • 📖STL in CPP ( Part II)
    • 📖STL in CPP ( Part III )
    • 📖STL in CPP ( Part IV )
    • 📖STL in CPP ( Part V )
    • 📖STL in CPP ( Part VI )
    • 📖STL in CPP ( Part VII )
  • ✏️Pointers in C / C++
    • 📖Pointers in details
  • 📘Strings in CPP 2023
  • 🕞Thread in C++ 2023
  • 📓Smart Pointer in C++ 2023
  • Basic C++ Topics
    • 💼Type Casting in C++ 2023
  • 💻Advanced C++ Programming
    • 🎓Topics (Syllabus)
    • 🧑‍🎓Inheritance and Polymorphism
    • 🖊️Exception Handling
    • 🏃Runtime Type Information
    • 📔An Overview of Templates
    • 📡Template in C++
  • 💻Embedded Linux
    • 🖥️Embedded Linux OS
      • Build Yocto Project Step By Step
      • How to install apt-get to the Yocto Project image
      • Installing gcc/g++ toolchain in yocto project
      • Installing GDB in yocto project
      • Installing ssh-server-dropbear for embedded linux in yocto project
      • Add Python To A Build
      • Add Boost To A Build
      • Adding Valgrind To Build
      • How To Add A Custom App To A Yocto Build
      • Raspberry Pi
    • 📶Communication Protocols
      • ✏️Working With I2C using c++
      • 📔SPI Implementation with source code in C++
      • 📓Linux Serial Ports Using C/C++
      • 🖱️UART
      • 🖨️Universal GPIO Access
  • 🧑‍💻QT QML
    • 📘QT QML Concept 2023
      • Why Qt Framework and QML
      • Sqlite3 for qtquick application
      • How To Install sqlite3 in windows 11 || Windows 10
      • Signals and Slots in Qt QML
      • Working with Signals and Slots in QML
      • Sorting QML ListModels
      • ListView In QML With Section Delegate
      • Registration of custom enum in QML
      • Registering a QML Type as a Singleton object
      • Using enumerations in QML without C ++
      • Registering a Singleton object to use “Static” methods in QML
      • Connecting JavaScript files to other JavaScript files in a Qt / QML project
      • Positioning in Qt QML with anchors
      • TextInput validators in Qt Qml
      • Qt Qml Abstract Item Model using C++
      • Qt QML List Model
      • How to Register your C++ Class as a QML Type
      • Jabra Speaker Connect Qt Project
      • Qt | One article summarizing QObject
  • ▶️QT Concept
    • ℹ️Icon button
    • 💻Register QML Singletone in CP
Powered by GitBook
On this page

Was this helpful?

  1. QT QML
  2. QT QML Concept 2023

TextInput validators in Qt Qml

PreviousPositioning in Qt QML with anchorsNextQt Qml Abstract Item Model using C++

Last updated 1 year ago

Was this helpful?

This blog is really about TextInput validators:

  • InputMask

  • IntValidator

  • DoubleValidator

  • RegExpValidator

  • InputValidator (in this example, we will show you how to say “No” to unicorns!)

The first 4 is from Qt’s runtime. The last is from AppStudio’s AppFramework.

InputMask

TextField {
    inputMask: "999-AAA"
    placeholderText: qsTr("Type in a license plate of the pattern 999-AAA")
    text: "123-XYZ"
    color: acceptableInput ? "green" : "red"
    selectByMouse: true
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View full on .

InputMask is a property on TextInput components such as TextField. It allows us to quickly define acceptable text input. In the above example we allow 6 character license plates that begin with 3 digits, followed by a dash and finishing with 3 characters. When acceptable input is entered the text field changes from “red” to “green” and the user can submit the input.

The InputMask has the following features:

  • When the field is “empty” you’ll see placeholders for symbols like hyphen (‘-‘), you will not see the placeholder text

  • When you type, you do not need to type the fixed symbols, e.g. hyphen (‘-‘)

  • The code is very short

IntValidator

TextField {
    validator: IntValidator {
        bottom: 25
        top: 75
    }
    placeholderText: qsTr("Type in an integer between 25 and 75")
    text: "34"
    color: acceptableInput ? "green" : "red"
    selectByMouse: true
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

IntValidator is a QML component that can be assigned as a TextInput validator. It allows us to quickly define acceptable numerical input. In above example we allow any integer between 25 and 75. When acceptable input is entered the text field changes from “red” to “green” and the user can submit the input.

The IntValidator has the following features:

  • When the field is empty you can see the placeholder text

  • You cannot type more than the number of characters hinted by the IntValidator (e.g. in the above example you cannot type more than two digits)

DoubleValidator

TextField {
    validator: DoubleValidator {
        bottom: 25.0
        top: 75.0
    }
    placeholderText: qsTr("Type in a number between 25.0 and 75.0")
    text: "34.5"
    color: acceptableInput ? "green" : "red"
    selectByMouse: true
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

DoubleValidator is a QML component that can be assigned as a TextInput validator. It allows us to quickly define acceptable numerical input. In above example we allow any number between 25.0 and 75.0. When acceptable input is entered the text field changes from “red” to “green” and the user can submit the input.

The DoubleValidator has the following features:

  • When the field is empty you’ll see the placeholder text

  • You can type in any length (because decimal points are allowed)

RegExpValidator

TextField {
    validator: RegExpValidator {
        regExp: /[0-9]{3}-[A-Za-z]{3}/
    }
    placeholderText: qsTr("Type in a license plate of the pattern 999-AAA")
    text: "123-XYZ"
    color: acceptableInput ? "green" : "red"
    selectByMouse: true
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RegExpValidator is a QML component that can be assigned as a TextInput validator. It allows us to quickly define acceptable input. In the above example, we allow for license plates that begin with a 3 digit number, followed by a dash and ending with 3 letters.

RegExpValidator has the following features:

  • When the field is empty you’ll see the placeholder text (different than InputMask)

  • You must type the hyphen, it won’t be automatically typed for you (different than InputMask)

  • The regular expression is significantly more complex to implement and maintain

InputValidator

TextField {
    validator: InputValidator {
        validate: function (input, position) {
            if (input.match(/unicorn/)) {
                return InputValidator.Invalid
            }

            while (input.match(/canine/)) {
                input = input.replace(/canine/, 'dog')
                position -= 6
                position += 3
            }

            let state = InputValidator.Intermediate
            if (input.endsWith('.')) {
                state = InputValidator.Acceptable
            }

            return { input, position, state }
        }
    }
    placeholderText: qsTr("Type in a sentence ending with a fullstop. Avoid using 'unicorn' and 'canine'!")
    text: "A dog is man's best friend."
    selectByMouse: true
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

InputValidator is a QML component that can be assigned as a TextInput validator. It allows us to supply a Javascript function to be the validator. The Javascript function receives both the original string and position as input. It can return an input state (InputValidator.Invalid, InputValidator.Intermediate or InputValidator.Acceptable). It can also return an object that contains an updated version of the string, position and state. Returning an updated string allows us to implement auto correction. In the above example we forbid the user from typing in “unicorn”. It’s not allowed! We also forbid the user from typing “canine”. If they attempt to type “canine” it gets auto corrected as “dog”. The sentence will never be full accepted until the user finishes it with a full stop “.”.

InputValidator has the following features:

  • When the field is empty you’ll see the placeholder text

  • You can prohibit certain input (e.g. we can come up with a word blacklist, e.g. censor offensive words)

  • You can correct / fix input (i.e. implement auto correct)

  • You have full control over the experience

  • Takes more effort to implement your rules

References

View full on .

View full on .

View full on .

View full on .

🧑‍💻
📘
https://doc.qt.io/qt-5/qml-qtquick-textinput.html#inputMask-prop
https://doc.qt.io/qt-5/qlineedit.html#inputMask-prop
IntValidatorTest.qml
GitHub Gist
https://doc.qt.io/qt-5/qml-qtquick-intvalidator.html
DoubleValidatorTest.qml
GitHub Gist
https://doc.qt.io/qt-5/qml-qtquick-doublevalidator.html
RegExpValidatorTest.qml
GitHub Gist
https://doc.qt.io/qt-5/qml-qtquick-regexpvalidator.html
InputValidatorTest.qml
GitHub Gist
https://doc.arcgis.com/en/appstudio/api/reference/framework/qml-arcgis-appframework-inputvalidator/
https://doc.qt.io/qt-5/qml-qtquick-textinput.html#inputMask-prop
https://doc.qt.io/qt-5/qlineedit.html#inputMask-prop
https://doc.qt.io/qt-5/qml-qtquick-intvalidator.html
https://doc.qt.io/qt-5/qml-qtquick-doublevalidator.html
https://doc.qt.io/qt-5/qml-qtquick-regexpvalidator.html
https://doc.arcgis.com/en/appstudio/api/reference/framework/qml-arcgis-appframework-inputvalidator/
InputMaskTest.qml
GitHub Gist