Scribd
Upload
11 views

Jquery

The document contains a registration form with fields for full name, password, and confirm password. The form includes validation for the inputs using JavaScript to check the format and matching of values.

Uploaded by

Alfred G Kodiyan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

Jquery

The document contains a registration form with fields for full name, password, and confirm password. The form includes validation for the inputs using JavaScript to check the format and matching of values.

Uploaded by

Alfred G Kodiyan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<head>

<script src="https://code.jquery.com/jquery-3.6.1.js"integrity="sha256-
3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="crossorigin="anonymous"></script>
</head>
<body>
    <h1>REGISTRAION FORM</h1>
    <form id="registration_form">
    <label>Full Name</label>
    <input type="text"id="form_fname"required>
    <span class="error_form"id="fname_error_message"></span>
    <br>
    <br>
    <label>Password</label>
    <input type="text"id="form_password"required>
    <span class="error_form"id="password_error_message"></span>
    <br>
    <br>
    <label>Confirm Password</label>
    <input type="text"id="form_retype_password"required>
    <span class="error_form"id="retype_password_error_message"></span>
    <br>
    <br>
    <button type="Submit">REGISTER</button>
    </form>
    <script type="text/javascript">
        $(function(){
            $("#fname_error_message").hide()
            $("#password_error_message").hide()
            $("#retype_password_error_message").hide()
            var error_fname=false;
            var error_password=false;
            var error_retype_password=false;
            $("#form_fname").focusout(function(){check_fname();})
            $("#form_password").focusout(function(){check_password();})
            $("#form_retype_password").focusout(function()
{check_retype_password();})
            function check_fname(){
                var pattern = /^[a-z A-Z]*$/;
                var fn = $("#form_fname").val();
                if (pattern.test(fn) && fn!==''){
                    $("#fname_error_message").hide();
                    $("#form_fname").css("border-bottom","2px solid #34F458");

                }
                else{
                    $("#fname_error_message").html("Should Contain Only
Alphabetic Characters..");
                    $("#fname_error_message").show();
                    $("#fname_error_message").css("color","#F90A0A");
                    $("#form_fname").css("border-bottom","2px solid #F90A0A");
                }
            }
            function check_password()
            {
               
                var lps = $("#form_password").val().length;
                if(lps<8){
                    $("#password_error_message").html("Atleast 8
Characters..");
                    $("#password_error_message").show();
                    $("#password_error_message").css("color","#F90A0A");
                    $("#form_password").css("border-bottom","2px solid
#F90A0A");
                }
                else{
                    $("#password_error_message").hide();
                    $("#form_password").css("border-bottom","2px solid
#34F458");

                }
            }
            function check_retype_password(){
                var ps = $("#form_password").val();
                var cps = $("#form_retype_password").val()
                if(ps==cps){
                    $("#retype_password_error_message").hide();
                    $("#form_retype_password").css("border-bottom","2px solid
#34F458");
                }
                else{
                    $("#retype_password_error_message").html("Passwords didn't
match");
                    $("#retype_password_error_message").show();
                    $
("#retype_password_error_message").css("color","#F90A0A");
                    $("#form_retype_password").css("border-bottom","2px solid
#F90A0A")
                }
               
            }
           
        })
    </script>
</body>

You might also like