+800 018 1807 7683

BLOG DETAIL

  • home
  • BLOG
  • BLOG DETAIL
Technology
about_image
  • abc
  • 06 Nov 2025
06 Nov

registration form validation with password and confirm password using js

For HTML:


<section class="registration">
    <div class="container vh-100">
        <div class="row">
            <div class="col-md-4 offset-md-4">
                <h2 class="text-center text-capitalize"><u>registration form</u></h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form id="regForm" >
                            <div class="row mb-3">
                                <label for="fristName" class="col-sm-2 col-form-label">Frist Name <span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="fristName">
                                    <span id="fristNameError"></span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="lastName" class="col-sm-2 col-form-label">last Name<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="lastName">
                                    <span id="lastNameError"></span>
                                </div>

                            </div>
                            <div class="row mb-3">
                                <label for="UserName" class="col-sm-2 col-form-label">User Name<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="UserName">
                                    <span id="userNameError"></span>
                                </div>

                            </div>
                            <div class="row mb-3">
                                <label for="email" class="col-sm-2 col-form-label">Email<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="email">
                                    <span id="emailErrorText"></span>
                                </div>

                            </div>
                            <div class="row mb-3">
                                <label for="password" class="col-sm-2 col-form-label">Password<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="password">
                                    <span id="passwordErrorText"></span>
                                </div>

                            </div>
                            <div class="row mb-3">
                                <label for="confirmPassword" class="col-sm-2 col-form-label"> Confirm Password<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="confirmPassword">
                                    <span id="confirmPasswordErrorText"></span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="dateOfBirth" class="col-sm-2 col-form-label">Date of Birth<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="date" class="form-control" id="dateOfBirth">
                                    <span id="dateOfBirthError"></span>
                                </div>
                            </div>
                            <div>
                                <label>Gender<span>*</span></label>
                                <input type="radio" name="gender" class="gender">male
                                <input type="radio" name="gender" class="gender">Female
                                <span id="genderErrorText"></span>
                            </div>
                            <div class="row mb-3">
                                <label for="country" class="col-sm-2 col-form-label">Country<span>*</span></label>
                                <div class="col-sm-10">
                                    <select class="form-select" id="country">
                                        <option selected></option>
                                        <option value="Bangladesh">Bangladesh</option>
                                        <option value="India">India</option>
                                        <option value="Napal">Napal</option>
                                    </select>
                                    <span id="countryErrorText"></span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="postalCode" class="col-sm-2 col-form-label">Zip Code<span>*</span></label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="postalCode">
                                </div>
                            </div>
                            <p class="text-center">
                                <button type="submit" id="regButton" value="submit" class="btn btn-outline-success">Submit</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


use jquery link: 

<script src="js/jquery-3.7.1.min.js"></script>


for script:



function checkFristName(){
    var fristName = $('#fristName').val();
    var regex= /^[a-zA-Z-._ ]{2,10}$/;
    if(regex.test(fristName)){
        $('#fristNameError').html('');
        return true;
    }else{
        $('#fristNameError').html('Invalid frist name.you can use' +
            'Alphabetic character.(dot)-(hi-pen)_(underscore)');
        return false;
    }
}

$('#fristName').keyup(function () {
    var res = checkFristName();
    if(res == true){
        $('#fristNameError').html('');
        $('#regButton').prop("disabled" ,false);
    }else{
        $('#fristNameError').html('Invalid frist name.you can use' +
            'Alphabetic character.(dot)-(hi-pen)_(underscore)');
        $('#regButton').prop("disabled" ,true);
    }
});

function checkLastName(){
    var lastName = $('#lastName').val();
    var regex= /^[a-zA-Z-._ ]{2,10}$/;
    if(regex.test(lastName)){
        $('#lastNameError').html('');
        return true;
    }else{
        $('#lastNameError').html('Invalid last name.you can use' +
            'Alphabetic character.(dot)-(hi-pen)_(underscore)');
        return false;
    }
}

$('#lastName').keyup(function () {
    var res = checkLastName();
    if(res == true){
        $('#lastNameError').html('');
        $('#regButton').prop("disabled" ,false);
    }else{
        $('#lastNameError').html('Invalid last name.you can use' +
            'Alphabetic character.(dot)-(hi-pen)_(underscore)');
        $('#regButton').prop("disabled" ,true);
    }
});

function checkUserName(){
    var UserName = $('#UserName').val();
    var regex= /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/;
    if(regex.test(UserName)){
        $('#userNameError').html('');
        return true;
    }else{
        $('#userNameError').html("Invalid username. Must start with a letter, contain letters, numbers, or underscores, and be 3-16 characters long.");
        return false;
    }
}

$('#UserName').keyup(function () {
    var res = checkUserName();
    if(res == true){
        $('#userNameError').html('');
        $('#regButton').prop("disabled" ,false);
    }else{
        $('#userNameError').html("Invalid username. Must start with a letter, contain letters, numbers, or underscores, and be 3-16 characters long.");
        $('#regButton').prop("disabled" ,true);
    }
});


function checkEmail(){
    var email = $('#email').val();
    var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,4})+$/;
    if (regex.test(email)){
        $('#emailErrorText').html('');
        return true;
    }else {
        $('#emailErrorText').html('Invalid Email address please provide valid email format');
        return false;

    }
}

$('#email').keyup(function () {
    var res = checkEmail();
    if(res == true){
        $('#emailErrorText').html('');
        $('#regButton').prop("disabled" ,false);
    }else{
        $('#emailErrorText').html('Invalid Email address please provide valid email format');
        $('#regButton').prop("disabled" ,true);
    }
});

function checkPassword(){
    var password = $('#password').val();
    var regex= /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    if(regex.test(password)){
        $('#passwordErrorText').html('');
        return true;
    }else{
        $('#passwordErrorText').html("Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:");
        return false;
    }
}

$('#password').keyup(function () {
    var res = checkPassword();
    if(res == true){
        $('#passwordErrorText').html('');
        $('#regButton').prop("disabled" ,false);
    }else{
        $('#passwordErrorText').html("Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:");
        $('#regButton').prop("disabled" ,true);
    }
});

function checkConfirmPassword(){
    var confirmPassword = $('#confirmPassword').val();
    var password = $('#password').val();
    if(password == confirmPassword ){
        $('#confirmPasswordErrorText').html('');
        return true;
    }else{
        $('#confirmPasswordErrorText').html("password not match");
        return false;
    }
}
$('#confirmPassword').keyup(function () {
    checkConfirmPassword();

})

function checkDateOfBirth(){
    var dateOfBirth = $('#dateOfBirth').val();
    if(dateOfBirth){
        $('#dateOfBirth').prop('required',false)
        $('#dateOfBirthError').html('');
        return true;
    }else {
        $('#dateOfBirth').prop('required',true)
        $('#dateOfBirthError').html('Must be fillup');
        return false;
    }

}

$('#dateOfBirth').blur(function () {
    var res = checkDateOfBirth();
    if (res == true){
        $('#regButton').prop('disabled',false);
    }else {
        $('#regButton').prop('disabled',true);
    }

})


function checkGender(){
    if($('input[name="gender"]:checked').length){
        $('#genderErrorText').html('');
        return true;
    } else {$('#genderErrorText').html('select Gender');
        return false;
    }
}

$('.gender').click(function () {
    var res = checkGender();
    if (res == true){
        $('#genderErrorText').html('');
        $('#regButton').prop("disabled",false);
    }else {
        $('#genderErrorText').html('Select Gender');
        $('#regButton').prop("disabled",true);
    }

});


function checkCountry(){
    var country = $('#country').val();
    if (country){
        $('#countryErrorText').html('');
        return true;
    }else {
        $('#countryErrorText').html('select country');
        return false;
    }
}

$('#country').change(function () {
    var res = checkCountry();
    if (res == true){
        $('#countryErrorText').html('');
        $('#regButton').prop("disabled",false);
    }else {
        $('#countryErrorText').html('select country');
        $('#regButton').prop("disabled",true);
        }
});

$('#regForm').submit(function(){

    if(
        checkFristName() == true &&
        checkLastName() == true &&
        checkUserName() == true &&
        checkEmail() == true &&
        checkPassword() == true &&
        checkDateOfBirth() == true &&
        checkGender() == true &&
        checkCountry() == true
    ){
        $('#regButton').prop("disabled" ,false);
        return true;
    }else{
        $('#regButton').prop("disabled",true);
        return false;
    }

});