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 { StatusInput {
label: "Label" label: "Label"
input.placeholderText: "Input width component (right side)" input.placeholderText: "Input width component (right side)"

View File

@ -44,7 +44,8 @@ Item {
enum ValidationMode { enum ValidationMode {
OnlyWhenDirty, // validates input only after it has become dirty 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: ({}) property var errors: ({})
@ -57,7 +58,9 @@ Item {
root.errorMessage = "" root.errorMessage = ""
} }
property string _previousText: text
function validate() { function validate() {
if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) { if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
return return
} }
@ -87,11 +90,23 @@ Item {
if (errors){ if (errors){
let errs = Object.values(errors) let errs = Object.values(errors)
if (errs && errs[0]) { 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; errorMessage.text = errs[0].errorMessage || root.errorMessage;
} else { } else {
errorMessage.text = "" errorMessage.text = ""
} }
} }
_previousText = text
} }
if (asyncValidators.length && !Object.values(errors).length) { if (asyncValidators.length && !Object.values(errors).length) {

View File

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