No Description Available
1
FORM VALIDATIONS
This sidebar contact form is used to get user query form the same page.
onex
Step by step form is smart way to collect data, where we collect data from user in steps.
This is an example of ionic 4 form , ionic is a Javascript framework used to build hybrid mobile app,desktop and pwa.
This kind of registration and appointment booking form can be used on many places like on slider,banner and section.
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>
