Bootstrap Registration form with validation and alert

178 06 October 2019

No Description Available

BHUWAN ARORA

~ bhuwan

FORM VALIDATIONS

Related Elements

Step by step bootstrap form

Checkout page with materialize

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

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

Bootstrap Pop up login form

Sidebar contact form

Register Now Form

Step by step bootstrap form

Checkout page with materialize

Ionic form example

Resourse

Log in