JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<body class="body">

        <div class="center">
            <h4 class="title">Sign Up New User</h4>
        <form name="signin-form" method="post" class="needs-validations" novalidate id="forms">
            <div class="container">

                <div class="row mt-3">
                    <div class="col">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" required>
                        <div class="invalid-feedback">
                            Name can't be empty
                        </div>
                    </div>
                    <div class="col">
                        <label for="surname" class="form-label">Surname</label>
                        <input type="text" class="form-control" id="surname" placeholder="Surname" required>
                        <div class="invalid-feedback">
                            Surname can't be empty
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Email" required>
                        <div class="invalid-feedback">
                            invalid email
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <label for="email" class="form-label">Role</label>
                        <select class="form-select" id="validationCustom04" required>
                            <option selected disabled value="">Choose...</option>
                            <option>Captain</option>
                            <option>First Officer</option>
                        </select>
                        <div class="invalid-feedback">
                          ...

JavaScript

let forms = document.querySelectorAll(".needs-validations");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");


Array.prototype.slice.call(forms).forEach( function (form){
    form.addEventListener("submit",function (ev) {

        // test password check....
        if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
            pass1.className = 'form-control is-invalid'
            pass2.className = 'form-control is-invalid'
        }

        if (!form.checkValidity()){
            ev.preventDefault()
            ev.stopPropagation()
        }
        form.classList.add("was-validated")

    })
})