Bootstrap Registration form with validation and alert

No Description Available

BHUWAN ARORA

~ bhuwan

FORM VALIDATIONS

Related Elements

This is multipurpose why choose us column which can be used in many types of templates.

Our process section in Bootstrap

Bootstrap jquery Gallery

var inputs = document.getElementsByClassName('validate');
        var error_icon = document.getElementsByClassName('input-group-append');
        const enter = (e) =>
            {
                e.preventDefault();
                for(i=0;i<inputs.length;i++)
                    {
                        if(inputs[i].value == '')
                            {
                                error_icon[i].innerHTML = `<span class="input-group-text" id="basic-addon2"><i title="please Enter Your ${inputs[i].title}" class="fas fa-exclamation-circle text-danger"></i></span>`;

                                    inputs[6].innerHTML= '';

                            }
                        else if(!(inputs[6].value== "") && !(document.getElementById('cpswd').value == document.getElementById('pswd').value))
                                {
                                    inputs[6].innerHTML=`<div class="alert alert-warning">
                                    <strong>Warning!</strong> PASSWORD NOT MATCHED.</div>`;
                                }
                    }


                for(i=0;i<inputs.length;i++)
                {
                    inputs[i].setAttribute('set',i);
                    inputs[i].addEventListener('focus',trigger);
                }

            function trigger(e)
                {
                    var ind = e.target.getAttribute('set');
                    error_icon[ind].innerHTML  = '';
                }

            }
            document.getElementById('form-data').addEventListener('submit',enter);
            
            function callfun()
                {
                    if(document.getElementById('cpswd').value == document.getElementById('pswd').value)
                        {
                            
                                error_icon[5].innerHTML = `<span class="input-group-text" id="basic-addon2"><i class="fas fa-check-square"></i></span>`;
                        }
                    else if(document.getElementById('cpswd').value== '')
                        {
                            error_icon[5].innerHTML='';
                        }
                        else
                        {
                            error_icon[5].innerHTML = `<span class="input-group-text" id="basic-addon2"><i class="fas fa-times"></i></span>`;
                        }
                }

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>FORM VALIDATE</title>
        <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        
        <script src="https://kit.fontawesome.com/57ee1c6ea8.js"></script>
                                
        </head>
        <body>
            <form id="form-data" action="#" method="POST" style="width:33.3%;margin:0 auto;">
                <div class="form-wrapper">
                    <div class="form-group">
                        <label>Name :</label>
                         <div class="input-group mb-3">
                        <input id="name" type="text" title="Name" class="form-control validate">
                         <div class="input-group-append">
                                
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label> Contact Number :</label>
                         <div class="input-group mb-3">
                        <input id="phno" type="text" title="Contact Number" class="form-control validate">
                         <div class="input-group-append">
                               
                            </div>
                        </div>
                    </div>
                     <div class="form-group">
                        <label>Email-Id :</label>
                         <div class="input-group mb-3">
                        <input id="mail" type="email" title="email" class="form-control validate">
                         <div class="input-group-append">
                               
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Username :</label>
                         <div class="input-group mb-3">
                        <input id="uname" type="text" title="username" class="form-control validate">
                         <div class="input-group-append">
                                
                            </div>
                        </div>
                    </div>
                        <div class="form-group">
                        <label>Password :</label>
                         <div class="input-group mb-3">
                        <input  id="pswd" type="password" title="password" class="form-control validate">
                         <div class="input-group-append">
                                
                            </div>
                        </div>
                    </div>
                     <div class="form-group">
                        
                        <label>Confirm Password :</label>
                        <div class="input-group mb-3">
                            <input id="cpswd" onkeyup="callfun()" type="password" title="confirm password" class="form-control validate">                            
                            <div class="input-group-append">  
                            </div>
                        </div>
                        <div class="validate"></div>
                    </div>
                    <input type="submit" class="btn btn-success btn-block" value="Submit">
                </div>
        </form>                       
                          
    </body>
            
</html>

Get HTML

Get CSS

Get JS

Bootstrap Registration form with validation and alert

BHUWAN ARORA

Related Elements

Why Choose us Four Column

Awesome services section in grid vie

Grid service list with lightening ho

Bootstrap Datetimepicker Js Demo

Our process section in Bootstrap

Bootstrap jquery Gallery

Resourse

Log in