sonika/patient_Information_reactProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

validation fix

Browse Source
This commit is contained in:
sonika 2023-09-06 22:09:44 +05:30
parent a3e4a61015
commit d8a25984fc
1 changed files with 109 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/Components/PatientForm/PersonalSection1.tsx
View File

@ -42,15 +42,20 @@ interface Patient {
export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){ export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
const [birthDateValue, setBirthDateValue] = React.useState<any>(); const [birthDateValue, setBirthDateValue] = React.useState<any>();
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<any>({
fullName: "", fullName: "",
fullNameError:false,
homePhone: "", homePhone: "",
cellPhone: "", cellPhone: "",
cellPhoneError: false,
email: "", email: "",
emailError: false,
age: "", age: "",
ageError: false,
dateOfBirth: birthDateValue, dateOfBirth: birthDateValue,
socialSecurityNumber: "", socialSecurityNumber: "",
mailingAddress:"", mailingAddress:"",
mailingAddressFalse:false,
city: "", city: "",
state: "", state: "",
zipCode: "", zipCode: "",
@ -80,25 +85,39 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
return( return(
<> <>
<Grid container direction="row" className='section1-test-class'> <Grid container direction="row" className='section1-test-class'>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="outlined" variant="outlined"
label="Patient's Full Name" label="Patient's Full Name"
name="fullName" name="fullName"
placeholder='Please enter your name' placeholder='Please enter your name'
value={type=='display'?patientDataDiplay.fullName:patient.fullName} value={type=='display'?patientDataDiplay.fullName:patient.fullName}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
fullName: e.target.value, fullName: e.target.value,
})); }));
}} }}
required onBlur={(e) => {
error={patient.fullName === ""} if (e.target.value === "") {
helperText={patient.fullName === "" ? "Please enter your name" : ""} setPatient((prevValues:any) => ({
/> ...prevValues,
fullNameError: true,
}));
} else {
setPatient((prevValues:any) => ({
...prevValues,
fullNameError: false,
}));
}
}}
required
error={patient.fullNameError}
helperText={patient.fullNameError ? "Please enter your name" : ""}
/>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
@ -111,13 +130,26 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone} value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
cellPhone: e.target.value, cellPhone: e.target.value,
})); }));
}} }}
error={!(/^\d{10}$/.test(patient.cellPhone))} onBlur={(e) => {
helperText={!(/^\d{10}$/.test(patient.cellPhone)) ? "Please enter a valid 10-digit phone number" : ""} if (!(/^\d{10}$/.test(e.target.value))) {
setPatient((prevValues:any) => ({
...prevValues,
cellPhoneError: true,
}));
} else {
setPatient((prevValues:any) => ({
...prevValues,
cellPhoneError: false,
}));
}
}}
error={patient.cellPhoneError}
helperText={patient.cellPhoneError? "Please enter a valid 10-digit phone number" : ""}
/> />
</Grid> </Grid>
@ -131,7 +163,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.homePhone:patient.homePhone} value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
homePhone: e.target.value, homePhone: e.target.value,
})); }));
@ -151,13 +183,26 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.email:patient.email} value={type=='display'?patientDataDiplay.email:patient.email}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
email: e.target.value, email: e.target.value,
})); }));
}} }}
error={!(/^\S+@\S+\.\S+$/.test(patient.email))} onBlur={(e) => {
helperText={!(/^\S+@\S+\.\S+$/.test(patient.email)) ? "Please enter a valid email address" : ""} if (!(/^\S+@\S+\.\S+$/.test(e.target.value))) {
setPatient((prevValues:any) => ({
...prevValues,
emailError: true,
}));
} else {
setPatient((prevValues:any) => ({
...prevValues,
emailError: false,
}));
}
}}
error={patient.emailError}
helperText={patient.emailError? "Please enter a valid email address" : ""}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -171,13 +216,26 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.age:patient.age} value={type=='display'?patientDataDiplay.age:patient.age}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
age: e.target.value, age: e.target.value,
})); }));
}} }}
error={patient.age === ""} onBlur={(e) => {
helperText={patient.age === "" ? "Please enter your age" : ""} if (e.target.value === "") {
setPatient((prevValues:any) => ({
...prevValues,
ageError: true,
}));
} else {
setPatient((prevValues:any) => ({
...prevValues,
ageError: false,
}));
}
}}
error={patient.ageError}
helperText={patient.ageError ? "Please enter your age" : ""}
/> />
</Grid> </Grid>
@ -192,7 +250,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
onChange={(newValue) => { onChange={(newValue) => {
setBirthDateValue(newValue); setBirthDateValue(newValue);
}} }}
renderInput={(params) => <TextField required variant="outlined" {...params} />} renderInput={(params) => <TextField variant="outlined" {...params} />}
/> />
</LocalizationProvider> </LocalizationProvider>
</FormControl> </FormControl>
@ -207,7 +265,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber} value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
socialSecurityNumber: e.target.value, socialSecurityNumber: e.target.value,
})); }));
@ -227,13 +285,26 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress} value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
mailingAddress: e.target.value, mailingAddress: e.target.value,
})); }));
}} }}
error={patient.mailingAddress === ""} onBlur={(e) => {
helperText={patient.mailingAddress === "" ? "Please enter your mailing address" : ""} if (e.target.value === "") {
setPatient((prevValues:any) => ({
...prevValues,
mailingAddressError: true,
}));
} else {
setPatient((prevValues:any) => ({
...prevValues,
mailingAddressError: false,
}));
}
}}
error={patient.mailingAddressError}
helperText={patient.mailingAddressError? "Please enter your mailing address" : ""}
/> />
</Grid> </Grid>
@ -245,7 +316,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.state:patient.state} value={type=='display'?patientDataDiplay.state:patient.state}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
state: e.target.value, state: e.target.value,
})); }));
@ -261,7 +332,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.city:patient.city} value={type=='display'?patientDataDiplay.city:patient.city}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
city: e.target.value, city: e.target.value,
})); }));
@ -277,7 +348,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
value={type=='display'?patientDataDiplay.zipCode:patient.zipCode} value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
disabled={type=='display'} disabled={type=='display'}
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
zipCode: e.target.value, zipCode: e.target.value,
})); }));
@ -296,7 +367,7 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
defaultValue={type=='display'?patientDataDiplay.gender:patient.gender} defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
name="radio-buttons-group" name="radio-buttons-group"
onChange={(e)=>{ onChange={(e)=>{
setPatient((prevValues) => ({ setPatient((prevValues:any) => ({
...prevValues, ...prevValues,
gender: e.target.value, gender: e.target.value,
})); }));