mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 13:38:51 +00:00
Fix form validate
This commit is contained in:
@@ -114,7 +114,7 @@ const RoomForm = ({
|
||||
{...register('name', {
|
||||
required: REQUIRED_FIELD_ERROR,
|
||||
validate: {
|
||||
checkValidName: (value) => isValidString(value) || INVALID_FIELD,
|
||||
checkValidRoomName: (value) => isValidString(value) || INVALID_FIELD,
|
||||
},
|
||||
onChange: () => trigger('name'),
|
||||
})}
|
||||
@@ -129,8 +129,8 @@ const RoomForm = ({
|
||||
valueAsNumber: true,
|
||||
required: REQUIRED_FIELD_ERROR,
|
||||
validate: {
|
||||
checkIdentifiedCode: (v) =>
|
||||
isValidRegex(REGEX.NUMBER, v.toString()) || INVALID_FIELD,
|
||||
checkPrice: (v) =>
|
||||
isValidRegex(new RegExp(REGEX.NUMBER), v.toString()) || INVALID_FIELD,
|
||||
},
|
||||
onChange: () => trigger('price'),
|
||||
})}
|
||||
@@ -145,7 +145,7 @@ const RoomForm = ({
|
||||
valueAsNumber: true,
|
||||
required: REQUIRED_FIELD_ERROR,
|
||||
validate: {
|
||||
checkPhoneNum: (v) => isValidDiscount(v) || INVALID_DISCOUNT,
|
||||
checkDiscount: (v) => isValidDiscount(v) || INVALID_DISCOUNT,
|
||||
},
|
||||
onChange: () => trigger('discount'),
|
||||
})}
|
||||
|
||||
+14
-15
@@ -19,9 +19,7 @@ import FormRow from '@component/LabelControl/index.tsx';
|
||||
import Select, { ISelectOptions } from '@component/Select/index.tsx';
|
||||
|
||||
// Helpers
|
||||
import {
|
||||
isEmptyObj, isValidRegex,
|
||||
} from '@helper/validators.ts';
|
||||
import { isEmptyObj, isValidRegex } from '@helper/validators.ts';
|
||||
|
||||
// Constants
|
||||
import { ADD_SUCCESS, EDIT_SUCCESS } from '@constant/messages.ts';
|
||||
@@ -67,9 +65,7 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
const options: ISelectOptions[] = [];
|
||||
const tempUser = !user
|
||||
? { roomId: 0 }
|
||||
: { ...user };
|
||||
const tempUser = !user ? { roomId: 0 } : { ...user };
|
||||
|
||||
// Load and set default options room
|
||||
if (rooms.length > 0) {
|
||||
@@ -160,7 +156,8 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
|
||||
{...register('name', {
|
||||
required: REQUIRED_FIELD_ERROR,
|
||||
validate: {
|
||||
checkValidName: (value) => isValidRegex(REGEX.NAME, value) || INVALID_FIELD,
|
||||
checkValidName: (value) =>
|
||||
isValidRegex(new RegExp(REGEX.NAME), value) || INVALID_FIELD,
|
||||
},
|
||||
onChange: () => trigger('name'),
|
||||
})}
|
||||
@@ -178,7 +175,8 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
|
||||
required: REQUIRED_FIELD_ERROR,
|
||||
validate: {
|
||||
checkIdentifiedCode: (v) =>
|
||||
isValidRegex(REGEX.NUMBER, v.toString()) || INVALID_FIELD,
|
||||
isValidRegex(new RegExp(REGEX.NUMBER), v.toString()) ||
|
||||
INVALID_FIELD,
|
||||
},
|
||||
onChange: () => trigger('identifiedCode'),
|
||||
})}
|
||||
@@ -192,7 +190,8 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
|
||||
{...register('phone', {
|
||||
required: REQUIRED_FIELD_ERROR,
|
||||
validate: {
|
||||
checkPhoneNum: (v) => isValidRegex(REGEX.PHONE, v) || INVALID_PHONE,
|
||||
checkPhoneNum: (v) =>
|
||||
isValidRegex(new RegExp(REGEX.PHONE), v) || INVALID_PHONE,
|
||||
},
|
||||
onChange: () => trigger('phone'),
|
||||
})}
|
||||
@@ -217,12 +216,12 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
|
||||
</FormRow>
|
||||
|
||||
<Form.Action>
|
||||
<FormBtn type="submit" name="submit" disabled={!isDirty || !isValid || isSubmitting}>
|
||||
{
|
||||
!user
|
||||
? 'Add'
|
||||
: 'Save'
|
||||
}
|
||||
<FormBtn
|
||||
type="submit"
|
||||
name="submit"
|
||||
disabled={!isDirty || !isValid || isSubmitting}
|
||||
>
|
||||
{!user ? 'Add' : 'Save'}
|
||||
</FormBtn>
|
||||
<FormBtn type="button" styled="secondary" onClick={onCloseModal}>
|
||||
Close
|
||||
@@ -7,7 +7,7 @@ import { IoExit } from 'react-icons/io5';
|
||||
import Modal from '@component/Modal';
|
||||
import Table from '@component/Table';
|
||||
import Menus from '@component/Menus';
|
||||
import UserForm from './FormUser';
|
||||
import UserForm from './UserForm';
|
||||
|
||||
// Constants
|
||||
import { STATUS_CODE } from '@constant/responseStatus';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
// Components
|
||||
import UserTable from './TableUser';
|
||||
import UserTable from './UserTable';
|
||||
|
||||
// Styled
|
||||
import Button from '@commonStyle/Button';
|
||||
@@ -10,13 +10,13 @@ import { StyledUser, Title } from './styled';
|
||||
|
||||
// Types
|
||||
import Modal from '@component/Modal';
|
||||
import UserForm from './FormUser';
|
||||
import UserForm from './UserForm';
|
||||
|
||||
// Constants
|
||||
import { FORM } from '@constant/commons';
|
||||
|
||||
const User = () => {
|
||||
const ADD_ROOM = 'Add room';
|
||||
const TITLE = 'Add user';
|
||||
const [reload, setReload] = useState(true);
|
||||
|
||||
return (
|
||||
@@ -32,7 +32,7 @@ const User = () => {
|
||||
<Button onClick={onCloseModal}>Add user</Button>
|
||||
)}
|
||||
/>
|
||||
<Modal.Window name={FORM.USER} title={ADD_ROOM}>
|
||||
<Modal.Window name={FORM.USER} title={TITLE}>
|
||||
<UserForm setReload={setReload} reload={reload} />
|
||||
</Modal.Window>
|
||||
</Modal>
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"types": ["node"],
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
|
||||
Reference in New Issue
Block a user