Dependency Yup Custom Validation trong ReactJS (Phần 3)

Remind

Ở 2 phần trước mình đã nói về cách tạo các custom validation function với tham số là biến được truyền vào từ trong cùng 1 formik hoặc là tham chiếu ngoài. withFormik({ validationSchema: props => ExampleValidation(props.selectValue), ...

```
import * as Yup from 'yup';

const exampleValidation = selectValue => (selectValue === 'Yes' ? Yup.object().shape({ // khi selectValue có giá trị là 'Yes' thì sẽ bắt require của dependentSelectField và inputField
  dependentSelectField: Yup.string()
    .required('Require when SelectField has Yes value'),
  inputField: Yup.string()
    .required('Require when SelectField has Yes value'),
}) : Yup.object());
```

Tuy nhiên sẽ khá rối rắm nếu như chúng ta nhồi nhét tất cả các custom validation vào thư viện dù chỉ được dùng một vài lần. Ở bài viết này mình sẽ nói về cách viết những hàm ngắn gọn hơn, tích hợp vào field ta cần validate.

Thực hiện

Vẫn là bài toán cũ, bắt required field của selectValue nhưng lúc này thay vì dùng default method của Yup cung cấp là '.required' hoặc là viết một function mới thì mình sử dụng method '.test', đến lúc này có thể bạn sẽ nhận ra '.test' hình như đã găp ở đâu đó rồi, đúng rồi đấy, ở Phần 1 của series mình đã dùng .test để viết custom validation function '.requiredWith':

   function requiredWith(ref, expectedValue, msg) {
  return this.test({
    name: 'requiredWith',
    exclusive: false,
    message: msg,
    test(value) { return (this.resolve(ref) !== expectedValue) || (this.resolve(ref) === expectedValue && !!value); }, //value là giá trị hiện tại của field gọi method
  });
}

Yup.addMethod(Yup.mixed, 'requiredWith', requiredWith);

Ở đây, công việc cũng tương tự như vậy, trong file exampleValidation.js.

const exampleValidation = selectValue => Yup.object().shape({
selectField: Yup.string()
     .test('simpleRequiredField', 'Required Field message', value => (value !== null && value !== undefined)), //value là giá trị của selectField, bạn cũng có thể  lấy selectValue vì mình đã truyền vào như 1 props
dependentSelectField: Yup.string()
    .test('requiredRelatedField', 'Required Field message', value => ( selectValue === 'No' || (selectValue === 'Yes' && value !== null && value !== undefined) )), //chỉ bắt khi selectValue có giá trị là 'Yes'
 inputField: Yup.string()
    .test('requiredRelatedField', 'Required Field message', value => ( selectValue === 'No' || (selectValue === 'Yes' && value !== null && value !== undefined) )), //chỉ bắt khi selectValue có giá trị là 'Yes'
});

Kết

Nếu muốn hiểu sâu hơn thì bạn nên đọc ở repo chính thức của yup: https://github.com/jquense/yup, cung cấp rất nhiều các method và cách sử dụng. Qua 3 series mình đã chia sẽ cho các bạn về cách sử dụng yup validation cũng như tạo các custom validation method để ứng dụng trong ReactJs, mong nó sẽ giúp ích cho các bạn.