Minimum length for q2-input
Minimum length for q2-input
Hi Tanner,
The tecton input doesn't come with any builtin validation (see the [docs](https://cdn1.onlineaccess1.com/cdn/base/tecton/v1.14.0/Documentation/index.html#/ui/q2-input?section=validation) for more info).
However, this allows the devs to validate it to match our use case using JS. You can use the format modifier to help the user identify the expectation as well. See [format docs](https://cdn1.onlineaccess1.com/cdn/base/tecton/v1.14.0/Documentation/index.html#/ui/q2-input?section=phone-format-modifiers) for more info on phone modifer. The modifier will handle the input limitations for you.
Here is an example of a validation function that you could write, if you are concerned the format modifier is not enough client side validation:
```javascript
function verifyPhoneNumber(field) {
verifyRequiredInput(field);
const lengthValid = field.value.replace("/D/g", "").length >= 10 || field.value.length == 0;
const errorMsg = "Phone number can't be more than 10 digits.";
const errorSet = field.errors.includes(errorMsg);
const invalidPhoneField = !lengthValid;
if (invalidPhoneField && !errorSet) {
field.errors.push(errorMsg);
} else if (!invalidPhoneField && errorSet) {
const elementToRemove = field.errors.indexOf(errorMsg);
field.errors.splice(elementToRemove, 1);
}
}
field = document.getElementById("phone");
field.addEventListener("input", function(event) {
event.stopPropagation();
this.value = event.detail.value;
verifyPhoneNumber(this);
});
```
I hope that helps!
Hi Tanner,
The tecton input doesn't come with any builtin validation (see the [docs](https://cdn1.onlineaccess1.com/cdn/base/tecton/v1.14.0/Documentation/index.html#/ui/q2-input?section=validation) for more info).
However, this allows the devs to validate it to match our use case using JS. You can use the format modifier to help the user identify the expectation as well. See [format docs](https://cdn1.onlineaccess1.com/cdn/base/tecton/v1.14.0/Documentation/index.html#/ui/q2-input?section=phone-format-modifiers) for more info on phone modifer. The modifier will handle the input limitations for you.
Here is an example of a validation function that you could write, if you are concerned the format modifier is not enough client side validation:
```javascript
function verifyPhoneNumber(field) {
const lengthValid = field.value.replace("/D/g", "").length >= 10 || field.value.length == 0;
const errorMsg = "Phone number can't be more than 10 digits.";
const errorSet = field.errors.includes(errorMsg);
const invalidPhoneField = !lengthValid;
if (invalidPhoneField && !errorSet) {
field.errors.push(errorMsg);
} else if (!invalidPhoneField && errorSet) {
const elementToRemove = field.errors.indexOf(errorMsg);
field.errors.splice(elementToRemove, 1);
}
}
field = document.getElementById("phone");
field.addEventListener("input", function(event) {
event.stopPropagation();
this.value = event.detail.value;
verifyPhoneNumber(this);
});
```
I hope that helps!
Minimum length for q2-input
Hi Tanner,
The tecton input doesn't come with any builtin validation (see the [docs](https://cdn1.onlineaccess1.com/cdn/base/tecton/v1.14.0/Documentation/index.html#/ui/q2-input?section=validation) for more info).
However, this allows the devs to validate it to match our use case using JS. You can use the format modifier to help the user identify the expectation as well. See [format docs](https://cdn1.onlineaccess1.com/cdn/base/tecton/v1.14.0/Documentation/index.html#/ui/q2-input?section=phone-format-modifiers) for more info on phone modifer. The modifier will handle the input limitations for you.
Here is an example of a validation function that you could write, if you are concerned the format modifier is not enough client side validation:
```javascript
function verifyPhoneNumber(field) {
const lengthValid = field.value.replace("/D/g", "").length >= 10 || field.value.length == 0;
const errorMsg = "Phone number can't be more than 10 digits.";
const errorSet = field.errors.includes(errorMsg);
const invalidPhoneField = !lengthValid;
if (invalidPhoneField && !errorSet) {
field.errors.push(errorMsg);
} else if (!invalidPhoneField && errorSet) {
const elementToRemove = field.errors.indexOf(errorMsg);
field.errors.splice(elementToRemove, 1);
}
}
field = document.getElementById("phone");
field.addEventListener("input", function(event) {
event.stopPropagation();
this.value = event.detail.value;
verifyPhoneNumber(this);
});
```
I hope that helps!