@@ -4,22 +4,47 @@ import styles from './ChallengeName-Field.module.scss'
4
4
import cn from 'classnames'
5
5
6
6
const ChallengeNameField = ( { challenge, onUpdateInput } ) => {
7
+ const handleChange = ( e ) => {
8
+ // Remove any characters that are NOT letters, numbers, or spaces
9
+ const sanitizedValue = e . target . value . replace ( / [ ^ a - z A - Z 0 - 9 ] / g, '' )
10
+ onUpdateInput ( {
11
+ target : {
12
+ name : e . target . name ,
13
+ value : sanitizedValue
14
+ }
15
+ } )
16
+ }
17
+
7
18
return (
8
19
< >
9
20
< div className = { styles . row } >
10
21
< div className = { cn ( styles . field , styles . col1 ) } >
11
- < label htmlFor = 'challengeName' > Work Name < span > *</ span > :</ label >
22
+ < label htmlFor = 'challengeName' >
23
+ Work Name < span > *</ span > :
24
+ </ label >
12
25
</ div >
13
26
< div className = { cn ( styles . field , styles . col2 ) } >
14
- < input className = { styles . challengeName } id = 'name' name = 'name' type = 'text' placeholder = 'Work Name' value = { challenge . name } maxLength = '200' required onChange = { onUpdateInput } />
27
+ < input
28
+ className = { styles . challengeName }
29
+ id = 'name'
30
+ name = 'name'
31
+ type = 'text'
32
+ placeholder = 'Work Name'
33
+ value = { challenge . name }
34
+ maxLength = '200'
35
+ required
36
+ onChange = { handleChange }
37
+ />
15
38
</ div >
16
39
</ div >
17
- { challenge . submitTriggered && ! challenge . name && < div className = { styles . row } >
18
- < div className = { cn ( styles . field , styles . col1 ) } />
19
- < div className = { cn ( styles . field , styles . col2 , styles . error ) } >
20
- Work Name is required field
40
+ { challenge . submitTriggered && ! challenge . name && (
41
+ < div className = { styles . row } >
42
+ < div className = { cn ( styles . field , styles . col1 ) } />
43
+ < div className = { cn ( styles . field , styles . col2 , styles . error ) } >
44
+ Work Name is required field
45
+ </ div >
21
46
</ div >
22
- </ div > }
47
+ ) }
23
48
</ >
24
49
)
25
50
}
0 commit comments