Unable to remove validation for some specific field conditionally

[akash-int]

Hi @llauderesv
Unable to remove validation for some specific field conditionally.

[llauderesv]

Hi @akash-int,
Can you show me your sample app so that I can check it :)

[akash-int]

Hi @llauderesv
I have shared some here. Please check changeDesignationVal method.

// form related code start
// Define your state schema
const stateSchema = {
designation: { value: "", error: "" },
email: { value: "", error: "" }
};

// Create your own validationStateSchema
// stateSchema property should be the same in validationStateSchema
// in-order a validation to works in your input.
const stateValidatorSchema = {
designation: {
required: true
},
email: {
required: true,
validator: {
func: value => /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/.test(value),
error: "Invalid email format."
}
}
};

const {
values,
errors,
dirty,
handleOnChange,
handleOnSubmit,
setStateSchema,
disable,
setDisable
} = useForm(stateSchema, stateValidatorSchema, callAPI);

const { designation, email } = values;
// form related code ends

/* Method is responsible for API call */
const callAPI = (state) => {
console.log(state);
}

/* Method is responsible for changing Designation Value */
const changeDesignationVal = (item) => {
if (item.value === 'introducer') {
// here I want to remove required: true validation for email field
} else {
// here I want to again add required: true validation for email field
}
}

return (
<>

<Form.Row>
<Form.Group>
{errors.designation && dirty.designation && ( <Form.Text className="text-danger text-left"> {errors.designation} </Form.Text> )} </Form.Group> {/* email */} <Form.Group> <Form.Control type="email" placeholder="Email" size="lg" name="email" value={email} onChange={handleOnChange} /> {errors.email && dirty.email && ( <Form.Text className="text-danger text-left"> {errors.email} </Form.Text> )} </Form.Group> </Form.Row> </>

[llauderesv]

Hi @akash-int,
You should do the validation inside your designation stateSchemaValidator like below, func returns a boolean, if true error will shown and if not nothing happens. And you can now remove the requried true prop in your email stateValidatorSchema.

const stateValidatorSchema = {
  designation: {
    required: true,
    validator: {
        func: (value) => value !== 'introducer',
        error: "Email is required"
      }
  },

[akash-int]

Hi @llauderesv
This is not working for me in my scenario because if I choose introducer

1. I have to hide all other fields of the form
2. Remove validation from all other fields
3. Reset all other fields data if anything is written to that fields

If again I change the value from the dropdown I have to add validation to all other fields :-(

After implementing your example form is not validating. It remains still disabled as I have not provided all other fields data.

This is my actual state schema
const stateValidatorSchema = {
designation: {
required: true,
validator: {
func: (value) => value !== 'introducer',
error: "Email is required"
}
},
prefix: {
required: true
},
firstName: {
// required: true,
validator: {
func: value => /^[a-zA-Z]{2,20}$/.test(value),
error: "Invalid firstName format."
// Minimum 2 characters are required for firstName
}
},
lastName: {
// required: true,
validator: {
func: value => /^[a-zA-Z]{2,20}$/.test(value),
error: "Invalid lastName format."
}
},
email: {
// required: true,
validator: {
func: value => /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/.test(value),
error: "Invalid email format."
}
}
};

[akash-int]

Hi @llauderesv
Please check this sandbox link
https://codesandbox.io/s/xenodochial-bas-kr9hj?file=/src/App.js

1. I have to hide & remove validation from all other fields while introducer is selected
2. Again have to show & add validation to all other fields while director is selected.

Thanks in advance.

[llauderesv]

Hi @akash-int
I updated your sandbox to accomodate your concern, as an Intermitent solution I added a new function setValidatorSchema to set a brand new validation schema for your state depending on your condition.

[akash-int]

Hi @llauderesv
I have created that sandbox without sign in so somehow your changes are not showing there.Can you please create a new sandbox & share that link here :-)