# Form validation for the last name

I created an example of a simple form for a last name input in React, where I can check the validation of the data at the time of input. The last name should contain only small and capital letters. If the user enters other characters, the error text is displayed. I will be grateful for tips on improving the style.

index.js:

import React from 'react'
import { render } from 'react-dom'

const ErrorOutput = props => {
if (!(props.case).match(/^[a-zA-Z]+\$/) && (props.case).length > 0) {
return <span>Letters only.</span>
}
return <span></span>
}

class App extends React.Component {
constructor(props){
super(props)

this.state = { value: '' }
}

handleValidation(e) {
this.setState({
value: e.target.value
})

}

render() {
const inputValue = this.state.value

return (
<form>
<label>
Last name:
</label>
<input
type='text'
name ='lastName'
value = {this.state.value}
onChange = {this.handleValidation.bind(this)}
/>
<ErrorOutput case={inputValue} />
</form>
)
}
}

render(
<App />,
document.getElementById('root')
)

• This code looks good! I think the main thing to consider is how you'd reuse it once you start adding extra fields - you might want to take the whole label/input/error output combination and encapsulate it as a re-usable component. As a standalone piece of code though, I can't find any obvious improvements to make :) May 23 '18 at 11:46
• @KateHerasimenak your post claims "The last name should contain only small and capital letters, numbers, special characters, etc" yet the regular expression appears to only look for upper- and lower-case letters and the message is "Letters only" so should "numbers, special characters, etc" really be allowed? Sep 12 '18 at 15:31