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:
parent
a84026d74d
commit
4b579cddbe
|
@ -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)"
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue