Get HTML

Get CSS

Get JS

Bootstrap Registration form with validation and alert

1687 06 October 2019

No Description Available

BHUWAN ARORA

~ bhuwan

FORM VALIDATIONS

Related Elements

5225
1
0

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

Sidebar contact form

onex

3351
0
0

ionic 4 form example

onex

3109
0
0

Bootstrap 3 Modal

onex

2493
1
0

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

Step by step bootstrap form

onex

1831
1
0

Bootstrap Pop up login form

onex

1599
1
0

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

1496
0
0

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

Register Now Form

onex

1418
0
0

Checkout page with materialize

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

Resourse

Log in