Skip to content

Commit

Permalink
fix custom validation and include custom validation example
Browse files Browse the repository at this point in the history
  • Loading branch information
bluebill1049 committed May 9, 2019
1 parent d16444d commit 8767d33
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 11 deletions.
17 changes: 9 additions & 8 deletions examples/README.md
Expand Up @@ -4,18 +4,19 @@ you can view the source code within the folder or visit code sand box to see how

| Name | Link |
| --------------------------- | ----------------------------------- |
| Array Fields | https://codesandbox.io/s/6j1760jkjk |
| Async Submit Validation | https://codesandbox.io/s/xrjv48o0qp |
| Async Field Validation | https://codesandbox.io/s/m5pj55yj7x |
| Basic | https://codesandbox.io/s/yj07z1639 |
| Basic Validation | https://codesandbox.io/s/rwpz2jn6ln |
| Custom Input | https://codesandbox.io/s/72j69vnk1x |
| Register Error Messages | https://codesandbox.io/s/o766kp4z05 |
| Custom Validation | https://codesandbox.io/s/8n937m64o9 |
| Conditional Fields | https://codesandbox.io/s/13ykqx4wx7 |
| Async Submit Validation | https://codesandbox.io/s/xrjv48o0qp |
| Array Fields | https://codesandbox.io/s/6j1760jkjk |
| Async Field Validation | https://codesandbox.io/s/m5pj55yj7x |
| Normalize/Format/Mask Field | https://codesandbox.io/s/387z7njwzp |
| Custom Input | https://codesandbox.io/s/72j69vnk1x |
| Controlled Input | https://codesandbox.io/s/j36w7xkk7w |
| Default/Initial Form Value | https://codesandbox.io/s/l3mxpvmm9 |
| ValidationSchema | https://codesandbox.io/s/928po918qr |
| Dirty/Touched/Submitted | https://codesandbox.io/s/7o2wrp86k6 |
| Normalize/Format/Mask Field | https://codesandbox.io/s/387z7njwzp |
| Register Error Messages | https://codesandbox.io/s/o766kp4z05 |
| ValidationSchema | https://codesandbox.io/s/928po918qr |
| Validation On Blur | https://codesandbox.io/s/w7p3km6nyw |
| Validation On Change | https://codesandbox.io/s/74zw1oqozx |
| Controlled Input | https://codesandbox.io/s/j36w7xkk7w |
88 changes: 88 additions & 0 deletions examples/customValidation.tsx
@@ -0,0 +1,88 @@
import React from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form";

import "./styles.css";

function App() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => {
alert(JSON.stringify(data));
};
const intialValues = {
firstName: "bill",
lastName: "luo",
email: "bluebill1049@hotmail.com",
age: -1
};

return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="firstName">First Name</label>
<input
defaultValue={intialValues.firstName}
name="firstName"
placeholder="bill"
ref={register({
validate: value => value !== "bill"
})}
/>
</div>
{errors.firstName && <p>Your name is not bill</p>}

<div>
<label htmlFor="lastName">Last Name</label>
<input
defaultValue={intialValues.lastName}
name="lastName"
placeholder="luo"
ref={register({
validate: value => value.length > 3
})}
/>
</div>
{errors.lastName && <p>Your last name is less than 3 characters</p>}

<div>
<label htmlFor="email">Email</label>
<input
defaultValue={intialValues.email}
name="email"
placeholder="bluebill1049@hotmail.com"
type="email"
ref={register}
/>
</div>

<div>
<label htmlFor="age">Age</label>
<input
defaultValue={intialValues.age}
name="age"
placeholder="0"
type="text"
ref={register({
validate: {
positiveNumber: value => parseFloat(value) > 0,
lessThanHundred: value => parseFloat(value) < 200
}
})}
/>
</div>
{errors.age && errors.age.type === "positiveNumber" && (
<p>Your age is invalid</p>
)}
{errors.age && errors.age.type === "lessThanHundred" && (
<p>Your age should be greater than 200</p>
)}

<button type="submit">Submit</button>
</form>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
2 changes: 1 addition & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "react-hook-form",
"version": "3.2.4",
"version": "3.2.5-beta.3",
"main": "dist/index.js",
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
Expand Down
4 changes: 2 additions & 2 deletions src/logic/validateField.ts
Expand Up @@ -135,10 +135,10 @@ export default async (
values.reduce(async (previous, [key, validate], index): Promise<ValidatePromiseResult> => {
const lastChild = values.length - 1 === index;

if (isEmptyObject(previous) && typeof validate === 'function') {
if (typeof validate === 'function') {
const result = await validate(fieldValue);

if (result !== undefined) {
if (typeof result !== 'boolean' || !result) {
const data = {
type: key,
message: isString(result) ? result : '',
Expand Down

0 comments on commit 8767d33

Please sign in to comment.