diff --git a/README.md b/README.md index 82bf6fd..67e8896 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_722 TILs and counting..._ +_723 TILs and counting..._ --- @@ -238,6 +238,7 @@ _722 TILs and counting..._ - [Accessing Arguments To A Function](javascript/accessing-arguments-to-a-function.md) - [Character Codes from Keyboard Listeners](javascript/character-codes-from-keyboard-listeners.md) - [Check If Something Is An Array](javascript/check-if-something-is-an-array.md) +- [Check The Password Confirmation With Yup](javascript/check-the-password-confirmation-with-yup.md) - [Computed Property Names In ES6](javascript/computed-property-names-in-es6.md) - [Configure Jest To Run A Test Setup File](javascript/configure-jest-to-run-a-test-setup-file.md) - [Create A Cancelable Promise With PCancelable](javascript/create-a-cancelable-promise-with-pcancelable.md) diff --git a/javascript/check-the-password-confirmation-with-yup.md b/javascript/check-the-password-confirmation-with-yup.md new file mode 100644 index 0000000..442f7dc --- /dev/null +++ b/javascript/check-the-password-confirmation-with-yup.md @@ -0,0 +1,28 @@ +# Check The Password Confirmation With Yup + +The [Yup](https://github.com/jquense/yup) library makes it easy to validate +individual values in a JavaScript object. A common situation when +implementing a Sign Up form is asking the user to input their password twice +and then the app can make sure they match. + +To do this, we need the validation of our `passwordConfirmation` value to +reach outside of itself to make a comparison with the `password` value. This +can be done with Yup's `ref` function. + +```javascript +import * as Yup from 'yup'; + +validationSchema: Yup.object({ + password: Yup.string().required('Password is required'), + passwordConfirmation: Yup.string() + .oneOf([Yup.ref('password'), null], 'Passwords must match') +}); +``` + +We are able to reference the value of `password` with `ref`. We use the +`oneOf` function to ensure that `passwordConfirmation` either matches +`password` or if it is left blank and matches `null` then it passes the +validation for the time being. The second argument to `oneOf` is a custom +validation message when this validation fails. + +[source](https://github.com/jaredpalmer/formik/issues/90)