Form field validations using regex javascript

/ CSS, Development, HTML, Javascript

What is a Regular Expression?

As per wikipedia, A regular expression (shortened as regex or regexp; also referred to as rational expression) is a sequence of characters that specifies a search pattern.

Create an index.html file where you can add all the form input fields as below. Add name property for the fields which will be accessed in the validation.js to perform regex validations.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Regex form field validations</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>Regex form field validations</h2>
    <form>
        <input type="text" name="username" placeholder="Enter username">
        <p>Username must contain 6 - 12 characters</p>

        <input type="text" name="email" placeholder="Enter email">
        <p>Email must be a valid address, e.g. [email protected]</p>

        <input type="password" name="password" placeholder="Enter password">
        <p>Password must be alphanumeric (@, _ and - are also allowed) and be 8 - 20 characters long</p>

        <input type="text" name="phone" placeholder="Enter phone">
        <p>Phone must be a valid telephone number (11 digits) long</p>

        <input type="text" name="slug" placeholder="Enter your profile slug">
        <p>Slug must contain lowercase letters, numbers and hyphens and be 8 - 20 characters long</p>

    </form>
    <script type="text/javascript" src="validation.js"></script>
</body>
</html>

validation.js – This file select all input field elements and add loop through each form field. Add event listener for each element and then check pattern with the regular expression.

If its a valid expression then add css class “valid” and if its not valid expression then add css class “invalid”.

You can try and test regular expressions at https://regex101.com/

const inputs = document.querySelectorAll('input');

//Regex to validate input fields
const patterns = {
    username: /^[a-z\d]{5,12}/i,
    email:/^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/,
    password: /^[\w@-]{8,20}$/,
    phone: /^\d{11}$/,
    slug: /^[a-z\d-]{8,20}$/
}

function validate(field, regex){
    if(regex.test(field.value)) {
        field.className = 'valid';
    } else{
        field.className = 'invalid';
    }
}

inputs.forEach((input) => {
    input.addEventListener('keyup', (e) => {
        console.log(e.target.value);
        validate(e.target,patterns[e.target.attributes.name.value]);
    });
});

styles.css – This file includes all the styles used to format the form fields.


h2{
    font-weight: normal;
    margin: 20px auto;
    text-align: center;
}

form{
    width: 500px;
    margin: 20px auto;
}

input{
    display: block;
    padding: 8px 16px;
    font-size: 1em;
    margin: 10px auto;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none !important;
}

input.valid {
 border-color: #30cc30;
}

input.invalid {
    border-color: #ff0000;
}

input + p {
    color: #ff0000;
    opacity: 0;
    margin: 0 10px;
    height: 0;
    text-align: center;
} 

input.invalid +p {
    opacity: 1;
    height: auto;
    margin-bottom: 10px;
}

Full source code can found on my github project.