Yup validation in react for all

 Yup validation in react for all with when conditional

HousingValidationSchema = () =>
		Yup.object().shape({
			isCurrent: Yup.boolean(),
			country: Yup.number(), // Country is a dropdown
			state: Yup.string().when('country', {
				is: (value) => Enum.Countries.eUSA === value,
				then: Yup.string().required('Enter a state'),
			}),
			occupancyStatus: this.props.showOccupancyStatusAndDuration
				? !this.props.hideOccupancyStatus && this.props.isCurrent
					? Yup.number().required('Select an occupancy status')
					: Yup.number()
				: Yup.number(),
			address: Yup.string().required('Enter an address'),
			zipCode: Yup.string().when('country', {
				is: (value) => Enum.Countries.eUSA === value,
				then: Yup.string()
					.required('Enter a ZIP code')
					.matches(/^\d{5}(?:[-\s]\d{4})?$|^\d{9}$/, { message: 'ZIP code format is incorrect' }),
			}),
			city: Yup.string().when('country', {
				is: (value) => Enum.Countries.eUSA === value,
				then: Yup.string().required('Enter a city'),
			}),
			county: Yup.string().max(50, 'County must not exceed 50 characters'),
			occupancyYear: Yup.number().integer('Year must be a whole number').min(0, 'Year must be a positive number'),
			occupancyMonth: Yup.number()
				.integer('Month must be a whole number')
				.max(11, 'Month must be between 0-11')
				.min(0, 'Month must be a positive number'),
			numberInHouseHold: Yup.number().when('isCurrent', {
				is: true && this.props.isNumberInHouseholdRequired,
				then: this.props.showNumberInHouseHold
					? Yup.number().required('Select a number in household').min(0, 'Select a number in household')
					: Yup.number().integer('Invalid value detected'),
			}),
			numberOfDependents: Yup.number().when('isCurrent', {
				is: true,
				then: this.props.showNumberOfDependents ? Yup.number().integer('Invalid value detected') : Yup.number(),
			}),
			monthlyPayment: Yup.object().when(['isCurrent', 'occupancyStatus'], {
				is: (isCurrent, occupancyStatus) =>
					isCurrent &&
					this.isMonthlyPaymentRequired(
						this.props.requiredPaymentOccupancyStatuses,
						this.props.requiredPaymentBorrowerTypes,
						occupancyStatus,
						this.props.borrowerType
					),
				then: getMaskFieldValidation(Yup.number().required('Enter a monthly payment')),
			}),
			occupancyDescription: Yup.string().when(['isCurrent', 'occupancyStatus'], {
				is: (isCurrent, occupancyStatus) =>
					isCurrent && isOccupancyDescriptionVisible(occupancyStatus, !!this.props.isOccupancyDescriptionEnabled),
				then: Yup.string().required('Enter an occupancy description'),
			}),
		});


<ConnectedEditBlurForm
					page={ApplicationPages.APPLICATION}
					displayName={this.getFormDisplayName()}
					formId={this.getFormId()}
					ref={(component: any) => {
						if (component) {
							this.setEditBlurFormRef(component);
						}
					}}
					validationSchema={this.HousingValidationSchema}
					currentValues={this.props.currentValues}
					onSubmit={this.handleOnSubmit}
					render={(formikprops: FormikProps<HousingModelExtended>) => (
						<>
							<SectionHeading
								text={(formikprops.values.isCurrent ? 'Current' : 'Previous') + ' Housing'}
								id={`${this.props.id}-Housing-SectionHeading-${
									formikprops.values.isCurrent ? 'Current' : 'Previous'
								}Housing`}
								rank={3}
								isShowAccentBar={true}
								isHighlighted={true}
								additionalHeaderComponent={this.getAdditionaHeaderComponents(formikprops)}
							/>
							{this.props.isXAAdressVisible && (
								<>
									{this.isCountryVisible(formikprops) && (
										<EditBlurFormRow>
											<div className={'col-3'}>
												<Label text="Country *" id={`${this.props.id}-Housing-Label-Country`} />
												<Dropdown
													options={this.getEnumAsOptions<Enum.Countries>(
														Enum.Countries,
														EnumHelper.mapCountriesToLongStr,
														EnumHelper.mapCountriesToStr
													)}
													id={`${this.props.id}-Housing-Dropdown-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}Country`}
													onSelectChange={(text: string, value: string) => {
														this.handleNonTextControlUpdate(
															formikprops,
															'country',
															EnumHelper.mapCountriesToEnum(value)
														);
														// Clear all fields since the country has changed.
														this.handleNonTextControlUpdate(formikprops, 'address', '');
														this.handleNonTextControlUpdate(formikprops, 'address2', '');
														this.handleNonTextControlUpdate(formikprops, 'zipCode', '');
														this.handleNonTextControlUpdate(formikprops, 'city', '');
														this.handleNonTextControlUpdate(formikprops, 'state', '');
														this.handleNonTextControlUpdate(formikprops, 'county', '');
														if (!formikprops.values.monthlyPayment.isMasked) {
															this.handleNonTextControlUpdate(formikprops, 'monthlyPayment', {
																isMasked: false,
																value: 0,
															});
														}
														this.handleNonTextControlUpdate(formikprops, 'occupancyStatus', '');
														this.handleNonTextControlUpdate(formikprops, 'occupancyDuration', '');
														this.handleNonTextControlUpdate(formikprops, 'occupancyMonth', '');
														this.handleNonTextControlUpdate(formikprops, 'occupancyYear', '');
														this.handleNonTextControlUpdate(formikprops, numberInHouseOrDependents, '');
													}}
													onBlur={FormikHelper.handleDropdownBlur(this.editBlurForm, formikprops, 'country')}
													selectedValues={[
														formikprops.values.country !== undefined
															? EnumHelper.mapCountriesToStr(formikprops.values.country)
															: EnumHelper.mapCountriesToStr(Enum.Countries.eUSA),
													]}
													isDisabled={this.props.isReadOnly}
													{...FormikHelper.simpleIsError(formikprops, 'country')}
												/>
											</div>
										</EditBlurFormRow>
									)}
									{isDomesticAddress(formikprops.values.country) && (
										<EditBlurFormRow>
											<div className={'col-3'}>
												<TextField
													name="address"
													label={formikprops.values.isCurrent ? 'Address *' : 'Previous Address *'}
													id={`${this.props.id}-Housing-TextField-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}Address`}
													value={formikprops.values.address}
													onChange={formikprops.handleChange}
													maxLength={100}
													onBlur={formikprops.handleBlur}
													isReadOnly={this.props.isReadOnly}
													autoComplete={DISABLE_AUTOCOMPLETE}
													{...FormikHelper.simpleIsError(formikprops, 'address')}
												/>
											</div>
											<div className={'col-1'}>
												<TextField
													name="zipCode"
													label="ZIP Code *"
													id={`${this.props.id}-Housing-TextField-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}ZipCode`}
													value={formikprops.values.zipCode}
													onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
														this.handleZipBlur(formikprops, e);
													}}
													onChange={formikprops.handleChange}
													isReadOnly={this.props.isReadOnly}
													autoComplete={DISABLE_AUTOCOMPLETE}
													{...FormikHelper.simpleIsError(formikprops, 'zipCode')}
												/>
											</div>
											<div className={'col-3'}>
												<TextField
													name="city"
													label="City *"
													id={`${this.props.id}-Housing-TextField-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}City`}
													value={formikprops.values.city}
													onBlur={formikprops.handleBlur}
													onChange={formikprops.handleChange}
													isReadOnly={this.props.isReadOnly}
													autoComplete={DISABLE_AUTOCOMPLETE}
													{...FormikHelper.simpleIsError(formikprops, 'city')}
												/>
											</div>
											<div className={'col-1'}>
												<Label
													text="State *"
													id={`${this.props.id}-Housing-Label-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}State`}
												/>
												<Dropdown
													options={withOptionalDropdownOption(
														this.getEnumAsOptions<Enum.State>(
															Enum.State,
															EnumHelper.mapStateToLongStr,
															EnumHelper.mapStateToStr
														),
														''
													)}
													id={`${this.props.id}-Housing-Dropdown-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}State`}
													onSelectChange={(text: string, value: string) => {
														this.handleNonTextControlUpdate(formikprops, 'state', EnumHelper.mapStateToEnum(value));
													}}
													onBlur={FormikHelper.handleDropdownBlur(this.editBlurForm, formikprops, 'state')}
													selectedValues={[
														formikprops.values.state !== undefined
															? EnumHelper.mapStateToStr(formikprops.values.state)
															: '',
													]}
													isDisabled={this.props.isReadOnly}
													{...FormikHelper.simpleIsError(formikprops, 'state')}
												/>
											</div>
											{!this.props.isHideCounty && (
												<div className={'col-2'}>
													<TextField
														name="county"
														label="County"
														id={`${this.props.id}-Housing-TextField-${
															formikprops.values.isCurrent ? 'Current' : 'Previous'
														}Country`}
														value={formikprops.values.county}
														maxLength={50}
														onBlur={formikprops.handleBlur}
														onChange={formikprops.handleChange}
														isReadOnly={this.props.isReadOnly}
														autoComplete={DISABLE_AUTOCOMPLETE}
														{...FormikHelper.simpleIsError(formikprops, 'county')}
													/>
												</div>
											)}
										</EditBlurFormRow>
									)}
									{!isDomesticAddress(formikprops.values.country) && (
										<>
											<EditBlurFormRow>
												<div className={'col-4'}>
													<TextField
														name="address"
														label={'Address Line 1 *'}
														id={`${this.props.id}-Housing-TextField-AddressLine1`}
														value={formikprops.values.address}
														onChange={formikprops.handleChange}
														maxLength={100}
														onBlur={formikprops.handleBlur}
														isReadOnly={this.props.isReadOnly}
														autoComplete={DISABLE_AUTOCOMPLETE}
														{...FormikHelper.simpleIsError(formikprops, 'address')}
													/>
												</div>
											</EditBlurFormRow>
											<EditBlurFormRow>
												<div className={'col-4'}>
													<TextField
														name="address2"
														label={'Address Line 2'}
														id={`${this.props.id}-Housing-TextField-AddressLine2`}
														value={formikprops.values.address2}
														onChange={formikprops.handleChange}
														maxLength={100}
														onBlur={formikprops.handleBlur}
														isReadOnly={this.props.isReadOnly}
														autoComplete={DISABLE_AUTOCOMPLETE}
														{...FormikHelper.simpleIsError(formikprops, 'address2')}
													/>
												</div>
											</EditBlurFormRow>
											<EditBlurFormRow>
												<div className={'col-1'}>
													<TextField
														name="zipCode"
														label="Postal Code"
														id={`${this.props.id}-Housing-TextField-PostalCode`}
														value={formikprops.values.zipCode}
														onBlur={formikprops.handleBlur}
														onChange={formikprops.handleChange}
														autoComplete={DISABLE_AUTOCOMPLETE}
														isReadOnly={this.props.isReadOnly}
														{...FormikHelper.simpleIsError(formikprops, 'zipCode')}
													/>
												</div>
												<div className={'col-3'}>
													<TextField
														name="city"
														label="City/Province"
														id={`${this.props.id}-Housing-TextField-CityProvince`}
														value={formikprops.values.city}
														onBlur={formikprops.handleBlur}
														onChange={formikprops.handleChange}
														isReadOnly={this.props.isReadOnly}
														autoComplete={DISABLE_AUTOCOMPLETE}
														{...FormikHelper.simpleIsError(formikprops, 'city')}
													/>
												</div>
											</EditBlurFormRow>
										</>
									)}
								</>
							)}
							<EditBlurFormRow>
								{this.props.showOccupancyStatusAndDuration && (
									<div className={'col-3'}>
										<Label
											text={`Occupancy Status kkk${
												this.props.hideOccupancyStatus && formikprops.values.isCurrent ? '' : ' *'
											}`}
											id={`${this.props.id}-Housing-Label-${
												formikprops.values.isCurrent ? 'Current' : 'Previous'
											}OccupancyStatus`}
										/>
										<Dropdown
											options={withOptionalDropdownOption(
												this.getEnumAsOptions<Enum.OccupancyStatuses>(
													Enum.OccupancyStatuses,
													EnumHelper.mapOccupancyStatusesToLongStr,
													EnumHelper.mapOccupancyStatusesToStr
												),
												''
											)}
											id={`${this.props.id}-Housing-Dropdown-${
												formikprops.values.isCurrent ? 'Current' : 'Previous'
											}OccupancyStatus`}
											onSelectChange={(text: string, value: string) => {
												this.handleNonTextControlUpdate(
													formikprops,
													'occupancyStatus',
													EnumHelper.mapOccupancyStatusesToEnum(value)
												);
											}}
											onBlur={FormikHelper.handleDropdownBlur(this.editBlurForm, formikprops, 'occupancyStatus')}
											selectedValues={[
												formikprops.values.occupancyStatus !== undefined
													? EnumHelper.mapOccupancyStatusesToStr(formikprops.values.occupancyStatus)
													: '',
											]}
											isDisabled={this.props.isReadOnly}
											{...FormikHelper.simpleIsError(formikprops, 'occupancyStatus')}
										/>
									</div>
								)}
								{formikprops.values.isCurrent && formikprops.values.monthlyPayment !== undefined && (
									<div className={'col-2'}>
										{formikprops.values.monthlyPayment.isMasked ? (
											<TextField
												name="monthlyPayment"
												id={`${this.props.id}-Housing-TextField-MonthlyPayment`}
												value={MaskString}
												onChange={formikprops.handleChange}
												onBlur={formikprops.handleBlur}
												prefixUnit="$"
												label={this.getMonthlyPaymentLabel(formikprops)}
												isReadOnly={true}
												{...FormikHelper.simpleIsError(formikprops, 'monthlyPayment')}
											/>
										) : (
											<CurrencyField
												name="monthlyPayment"
												id={`${this.props.id}-Housing-CurrencyField-MonthlyPayment`}
												isReadOnly={this.props.isReadOnly}
												value={formikprops.values.monthlyPayment.value ?? 0}
												label={this.getMonthlyPaymentLabel(formikprops)}
												onChange={(val) => {
													formikprops.setFieldValue('monthlyPayment', { isMasked: false, value: val });
												}}
												onBlur={formikprops.handleBlur}
												{...FormikHelper.simpleIsError(formikprops, 'monthlyPayment.value')}
											/>
										)}
									</div>
								)}
								{this.props.showOccupancyStatusAndDuration && (
									<div className="col-2">
										<Label
											text="Occupancy Duration"
											id={`${this.props.id}-Housing-Label-${
												formikprops.values.isCurrent ? 'Current' : 'Previous'
											}OccupancyDuration`}
										/>
										<div className="row">
											<div className="col-6">
												<IntegerField
													name="occupancyYear"
													id={`${this.props.id}-Housing-IntegerField-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}OccupancyYear`}
													value={formikprops.values.occupancyYear}
													onChange={(year) => {
														formikprops.setFieldValue('occupancyYear', year);
													}}
													onBlur={formikprops.handleBlur}
													postfixUnit="yr"
													{...FormikHelper.simpleIsError(formikprops, 'occupancyYear')}
													isReadOnly={this.props.isReadOnly}
													autoComplete={DISABLE_AUTOCOMPLETE}
												/>
											</div>
											<div className="col-6">
												<IntegerField
													name="occupancyMonth"
													id={`${this.props.id}-Housing-IntegerField-${
														formikprops.values.isCurrent ? 'Current' : 'Previous'
													}OccupancyMonth`}
													value={formikprops.values.occupancyMonth}
													onChange={(month) => {
														formikprops.setFieldValue('occupancyMonth', month);
													}}
													onBlur={formikprops.handleBlur}
													postfixUnit="mo"
													{...FormikHelper.simpleIsError(formikprops, 'occupancyMonth')}
													isReadOnly={this.props.isReadOnly}
													autoComplete={DISABLE_AUTOCOMPLETE}
												/>
											</div>
										</div>
									</div>
								)}
								{this.props.isCurrent && numberInHouseOrDependents && (
									<div className={'col-2'}>
										<Label
											text={numberInHouseOrDependentsLabel}
											id={`${this.props.id}-Housing-Label-NumberinHousehold`}
										/>
										<Dropdown
											options={[
												{ text: '', value: '-1' },
												{ text: '0', value: '0' },
												{ text: '1', value: '1' },
												{ text: '2', value: '2' },
												{ text: '3', value: '3' },
												{ text: '4', value: '4' },
												{ text: '5+', value: '5' },
											]}
											id={`${this.props.id}-Housing-Dropdown-NumberInHousehold`}
											selectedValues={[
												formikprops.values[numberInHouseOrDependents] !== undefined
													? formikprops.values[numberInHouseOrDependents].toString()
													: '',
											]}
											isDisabled={this.props.isReadOnly}
											onSelectChange={(text: string, value: string) => {
												this.handleNonTextControlUpdate(formikprops, numberInHouseOrDependents, value);
											}}
											onBlur={FormikHelper.handleDropdownBlur(
												this.editBlurForm,
												formikprops,
												numberInHouseOrDependents
											)}
											{...FormikHelper.simpleIsError(formikprops, numberInHouseOrDependents)}
										/>
									</div>
								)}
							</EditBlurFormRow>
							{isOccupancyDescriptionVisible(
								formikprops.values.occupancyStatus,
								!!this.props.isOccupancyDescriptionEnabled
							) && (
								<EditBlurFormRow>
									<div className="col-3">
										<TextField
											name="occupancyDescription"
											label="Occupancy Description *"
											id={`${this.props.id}-Hosuing-TextField-OccupancyDescription`}
											value={formikprops.values.occupancyDescription}
											onChange={formikprops.handleChange}
											onBlur={formikprops.handleBlur}
											isReadOnly={this.props.isReadOnly}
											autoComplete={DISABLE_AUTOCOMPLETE}
											{...FormikHelper.simpleIsError(formikprops, 'occupancyDescription')}
										/>
									</div>
								</EditBlurFormRow>
							)}
						</>
					)}
				/>

Comments

Post a Comment

Popular posts from this blog

YUP Validation for String and Array

Image
 YUP Validation for string and Array  purposeTypes : Yup.lazy(() => { if ( this .state.isMLPurposeTypes) { return Yup.string().notRequired(); } return Yup.array().min( 1 , 'Select Asset Type' ); }), decisionFlowValidationSchema = Yup.object().shape({ flowDescription : Yup.string().required( 'Flow Description can not be blank' ), appType : Yup.string().required( 'Select App Type' ), isSinglePaymentLoan : Yup.string().required( 'Select Single Payment Loan' ), calculateBasedOn : Yup.lazy(() => { if ( this .state.isCalculateBasedOnHidden) { return Yup.string().notRequired(); } return Yup.string().required( 'Select Calculate Based On' ); }), assetTypes : Yup.lazy(() => { if ( this .state.isHEVLAssetType) { return Yup.array().min( 1 , 'Select Asset Type' ); } return Yup.array().notRequired(); }), purposeTypes : Yup.lazy(() => { if ( this .s...
Read more