Validation illegal characters in form

Question

I want to add validation for illegal characters in register form for example for username field.

If in username field is any of that characters "!,%&*" Form will not send request to backend. I do not have idea how I should start with it. I spent in internet few hours and I'm really beginner in JS.

There is my class:

import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormGroup from 'react-bootstrap/FormGroup';
import FormLabel from 'react-bootstrap/FormLabel';

import './Registration.css'
import RegistrationAlert from './RegistrationAlert.js';

class Registration extends Component{

    constructor(props){
        super(props);
        this.registrationAlert = React.createRef();
    }

    handleSubmit = event => {
        event.preventDefault();
        event.target.className += " was-validated";
        this.registerUser(event.target.username.value,event.target.email.value,event.target.password.value, event.target.firstName.value, event.target.lastName.value,
         event.target.department.value)
    }

    handleChange = event => {
    this.setState({ [event.target.name]: event.target.value});
    }

    registerUser(username, email, password, firstName, lastName, department) {
        fetch('http://localhost:8080/users', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                email: email,
                password: password,
                firstName: firstName,
                lastName: lastName,
                department: department,
            })
        }).then(function(response){
            if (response.status === 200){
                this.showRegistrationAlert("success", "Użytkownik zarejestrowany!", "Możesz się już zalogować.");
            } else if (response.status === 422) {
                this.showRegistrationAlert("danger", "Użytkownik nie został zarejestrowany!", "Prawdopodobnie już istnieje.");
            } else {
                this.showRegistrationAlert("danger", "Użytkownik nie został zarejestrowany!", "Coś nie pykło :(");
            }
        }.bind(this)).catch(function(error){
            this.showRegistrationAlert("danger", "Error", "Napisz do Bartka! :)");
        }.bind(this));
    }


    showRegistrationAlert(variant, heading, message) {
        this.registrationAlert.current.setVariant(variant);
        this.registrationAlert.current.setHeading(heading);
        this.registrationAlert.current.setMessage(message);
        this.registrationAlert.current.setVisible(true);
    }

    render(){
        return (
            <>
        <div className="Register">
        <Form className="needs-validation" onSubmit = {this.handleSubmit}>
                <FormGroup className="firstNameForm" controlId="firstName" size="lg">
                 <FormLabel>Imię</FormLabel>
                 <Form.Control type="text" onChange={this.handleChange} name="firstName" placeholder="Jan" required/>
                </FormGroup>
                <FormGroup className="lastNameForm" controlId="lastName" size="lg">
                  <FormLabel>Nazwisko</FormLabel>
                  <Form.Control type="text" onChange={this.handleChange} name="lastNameName" placeholder="Kowalski" required/>
                 </FormGroup>

                <FormGroup className="usernameForm" controlId="username" size="lg">
                  <FormLabel>Nazwa Użytkownika</FormLabel>
                  <Form.Control type="text" onChange={this.handleChange} name="username" placeholder="Jan.Kowalski" required/>
                </FormGroup>

            <FormGroup className="emailForm" controlId="email" size="lg">
                <FormLabel>E-mail</FormLabel>
                <Form.Control type="text" onChange={this.handleChange} name="email" placeholder="email@comarch.pl" required/>
            </FormGroup>
            
            <FormGroup className="passwordForm" controlId="password" size="lg">
                <FormLabel>Hasło</FormLabel>
                <Form.Control type="password" onChange={this.handleChange} name="password" placeholder="Hasło" required/>
            </FormGroup>

                            <Form.Group>
                              <Form.Label as="legend" column sm={2}>
                                Dział:
                              </Form.Label>
                                <Form.Check
                                  type="radio"
                                  label="HaMag"
                                  name="department"
                                  id="departmentHaMag"
                                  value="Handel/Magazyn"
                                  required
                                />
                                <Form.Check
                                  type="radio"
                                  label="Ksieg"
                                  name="department"
                                  id="departmentKsieg"
                                  value="Ksiegowść"
                                />
                                <Form.Check
                                  type="radio"
                                  label="KiP"
                                  name="department"
                                  id="departmentKiP"
                                  value="Kadry/Płace"
                                />
                            </Form.Group>

            <Button block size ="lg" type ="submit">Zarejestruj</Button>
        </Form>
    </div>

    <RegistrationAlert ref={this.registrationAlert}/>
        </>
            )
        }
    }

export default Registration;```

Answer 1

change your handleSubmit function:

handleSubmit = event => {
    event.preventDefault();
    event.target.className += " was-validated";
    let regex = '.*[\!\,\%\&\*].*'
    if(regex.test(event.target.user)}{
      // show user that he shouldnt be using those chars
    }else{
      this.registerUser(event.target.username.value,event.target.email.value,event.target.password.value, event.target.firstName.value, event.target.lastName.value,
     event.target.department.value)
    }
}