-
Notifications
You must be signed in to change notification settings - Fork 0
/
ex-05.js
44 lines (42 loc) · 1.46 KB
/
ex-05.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import {useState} from 'react';
import {onSubmit} from './utils.js';
import './form-style.css';
function Input(props) {
const [validationMessage, setValidationMessage] = useState();
const validationHandler = (e) => {
setValidationMessage(e.target.validationMessage);
e.preventDefault();
};
return (
<>
<input
onInvalid={validationHandler}
onChange={validationHandler}
{...props}
/>
<span className="validation-message">{validationMessage}</span>
</>
);
}
export default function Form() {
return (
<form onSubmit={onSubmit}>
<p>
<label>
Your e-mail
<Input
type="email"
name="email"
minLength="4"
required
title="Use an e-mail with fully qualified domain."
pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$"
/>
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
);
}