front:add: InputField component
This commit is contained in:
@@ -17,6 +17,12 @@
|
||||
/** @type {string} */
|
||||
export let label = "";
|
||||
|
||||
/** @type {string} */
|
||||
export let otherPasswordValue = "";
|
||||
|
||||
/** @type {boolean} */
|
||||
export let toUpperCase = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
/**
|
||||
@@ -26,7 +32,11 @@
|
||||
const target = event.target;
|
||||
|
||||
if (target instanceof HTMLInputElement) {
|
||||
const inputValue = target.value;
|
||||
let inputValue = target.value;
|
||||
if (toUpperCase) {
|
||||
inputValue = inputValue.toUpperCase();
|
||||
target.value = inputValue; // Update the input field value
|
||||
}
|
||||
value = inputValue;
|
||||
// dispatch("input", { name, value: inputValue });
|
||||
}
|
||||
@@ -42,16 +52,40 @@
|
||||
switch (name) {
|
||||
case "first_name":
|
||||
case "last_name":
|
||||
case "address":
|
||||
case "city":
|
||||
case "account_holder_name":
|
||||
case "bank":
|
||||
return value.trim() ? null : $t("required");
|
||||
case "birth_date":
|
||||
case "membership_start_date":
|
||||
return value.trim() ? null : $t("required_date");
|
||||
case "email":
|
||||
return /^\S+@\S+\.\S+$/.test(value) ? null : $t("invalid_email");
|
||||
case "password":
|
||||
return !value.trim() || value.length >= 8
|
||||
case "password2":
|
||||
if (!value.trim()) {
|
||||
return null;
|
||||
}
|
||||
if (value.length < 8) {
|
||||
return $t("required_password");
|
||||
}
|
||||
if (otherPasswordValue && value !== otherPasswordValue) {
|
||||
return $t("required_password_match");
|
||||
}
|
||||
return null;
|
||||
case "phone":
|
||||
return /^\+?[0-9\s()-]{7,}$/.test(value) ? null : $t("invalid_phone");
|
||||
case "zip_code":
|
||||
return /^\d{5}$/.test(value) ? null : $t("invalid_zip_code");
|
||||
case "iban":
|
||||
return /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
|
||||
? null
|
||||
: $t("required_password");
|
||||
// case "password2":
|
||||
// // Note: This case might need special handling as it depends on another field
|
||||
// return $t("required_password_match");
|
||||
: $t("invalid_iban");
|
||||
case "bic":
|
||||
return /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
|
||||
? null
|
||||
: $t("invalid_bic");
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user