Get HTML

Get CSS

Get JS

Bootstrap Registration form with validation and alert

270 06 October 2019

No Description Available

BHUWAN ARORA

~ bhuwan

FORM VALIDATIONS

Related Elements

Step by step form is smart way to collect data, where we collect data from user in steps.

Step by step bootstrap form

onex

This sidebar contact form is used to get user query form the same page.

Sidebar contact form

onex

Bootstrap Pop up login form

onex

This is an example of ionic 4 form , ionic is a Javascript framework used to build hybrid mobile app,desktop and pwa.

Ionic form example

onex

Checkout page with materialize

onex

This kind of registration and appointment booking form can be used on many places like on slider,banner and section.

Register Now Form

onex

ionic 4 form example

onex

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

Step by step bootstrap form

Sidebar contact form

Bootstrap Pop up login form

Ionic form example

Checkout page with materialize

Register Now Form

ionic 4 form example

Resourse

Log in