feat(StatusInput): add mode to ingnore unvalidated content

Add optional feature to StatusInput not to allow typing characters
that are not validated

updates #4961
This commit is contained in:
Stefan 2022-03-10 16:33:10 +01:00 committed by Stefan Dunca
parent a84026d74d
commit 4b579cddbe
3 changed files with 31 additions and 2 deletions

View File

@ -102,6 +102,20 @@ Column {
]
}
StatusInput {
label: "Input with <i>StatusRegularExpressionValidator</i>"
charLimit: 30
input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
validators: [
StatusRegularExpressionValidator {
regularExpression: /^[0-9A-Za-z_\$-\s]*$/
errorMessage: "Bad input!"
}
]
}
StatusInput {
label: "Label"
input.placeholderText: "Input width component (right side)"

View File

@ -44,7 +44,8 @@ Item {
enum ValidationMode {
OnlyWhenDirty, // validates input only after it has become dirty
Always // validates input even before it has become dirty
Always, // validates input even before it has become dirty
IgnoreInvalidInput // ignore the new content if it doesn't match
}
property var errors: ({})
@ -57,7 +58,9 @@ Item {
root.errorMessage = ""
}
property string _previousText: text
function validate() {
if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
return
}
@ -87,11 +90,23 @@ Item {
if (errors){
let errs = Object.values(errors)
if (errs && errs[0]) {
if(validationMode === StatusInput.ValidationMode.IgnoreInvalidInput
&& text.length > _previousText.length) {
// Undo the last input
const cursor = statusBaseInput.cursorPosition;
statusBaseInput.text = _previousText;
if (statusBaseInput.cursor > statusBaseInput.text.length) {
statusBaseInput.cursorPosition = statusBaseInput.text.length;
} else {
statusBaseInput.cursorPosition = cursor-1;
}
}
errorMessage.text = errs[0].errorMessage || root.errorMessage;
} else {
errorMessage.text = ""
}
}
_previousText = text
}
if (asyncValidators.length && !Object.values(errors).length) {

View File

@ -50,7 +50,7 @@ StatusValidator {
property var regularExpression
name: "regex"
errorMessage: "Please enter a valid regular expression."
errorMessage: `Must match regex(${validatorObj.regularExpression.toString()})`
validatorObj: RegularExpressionValidator { regularExpression: root.regularExpression }
validate: function (value) {