Not allowing space in input field React

user_14285249 0
Viewed 4220

I have got a register form which sends request with the first and last name and works fine. But, when a user enters whitespace it considers it as a valid input. The validation errors are sent from the api's response where a blank input gives an error. I tried to trim the firstname in submit() thinking that it it has spaces, it will remove it and consider as a blank input. But this doesnt seem to work. How can I implement the logic for it to trim the whitespace and not allow it.

export default class Signup extends Form {
    constructor(props, context) {
        super(props, context);
        this.state = {                
            firstName: '',
            lastName: '',        
        };
    
        this.handleChange = this.handleChange.bind(this);

    }

    
    submit() {          
        let firstName=this.state.firstName.trim(); 
       
        return this.app.register({
            firstName: firstName,
            lastName: this.state.lastName,
        }).then(account => success())
        .catch(e => {
            this.setState({ error: `signup_form_error_${e}` });
          })    
    }
    
    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    render(props, state) {


        return <form onSubmit={this.form.submit} name="signup" noValidate>
          <input type="text" name="firstName" value={this.state.firstName} onChange={this.handleChange} />
            <input type="text" name="lastName" value={this.state.lastName} onChange={this.handleChange} />
       

            <div class="s72-buttons">
                <button type="submit"</button>
            </div>
        </form>;
    }
}
reactjs validation javascript
1 Answers

The error lives in your onSubmit at your <form/> you have it like this

this.form.submit

but this.form does not exists, there for the default behavior takes place

export default class Signup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {                
            firstName: '',
            lastName: '',        
        };
    
        this.handleChange = this.handleChange.bind(this);
        this.submit = this.submit.bind(this);

    }

    
    submit(event) {
        event.preventDefault();          
        const regexp = /^\S*$/; 
        const { firstName,lastName }= this.state; 
       
       if (!regexp.test(firstName) || !regexp.test(lastName)) {
         // cancel process, whitespace found;

         return;
       }

        return this.app.register({
            firstName: firstName,
            lastName: this.state.lastName,
        }).then(account => success())
        .catch(e => {
            this.setState({ error: `signup_form_error_${e}` });
          })    
    }
    
    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value.trim();
        })
    }

    render(props, state) {


        return <form onSubmit={this.submit} name="signup">
          <input pattern="/^\S*$/" type="text" name="firstName" value={this.state.firstName} onChange={this.handleChange} />
            <input pattern="/^\S*$/" type="text" name="lastName" value={this.state.lastName} onChange={this.handleChange} />
       

            <div class="s72-buttons">
                <button type="submit">submit</button>
            </div>
        </form>;
    }
}
user_73665260
Related