No Description Available
1
Step by step form is smart way to collect data, where we collect data from user in steps.
This sidebar contact form is used to get user query form the same page.
onex
This is an example of ionic 4 form , ionic is a Javascript framework used to build hybrid mobile app,desktop and pwa.
FORM VALIDATIONS
bhuwan
This kind of registration and appointment booking form can be used on many places like on slider,banner and section.
let status = $(".status"); let prog = $(".progress-bar"); let steps = $(".step:not(.step.end)"); let proceed; $(".next").click(function(e) { e.preventDefault(); $(".prev") .show() .prop("disabled", false); $.each(steps, (i, e) => { if ($(e).css("display") == "block") { if ($(e).attr("validation") == "true") { validate(e); } if (proceed) { $(e) .hide() .next() .fadeIn() .removeClass("d-none"); progress(e); if ($(e).index() == steps.length) { $(this).hide(); $(".prev").hide(); } return false; } } }); }); $(".prev").click(function(e) { e.preventDefault(); $(".next") .show() .prop("disabled", false); $.each(steps, (i, e) => { if ($(e).css("display") == "block") { $(e) .hide() .prev() .fadeIn() .removeClass("d-none"); console.log( $(e) .prev() .prev() ); console.log($(e)); progress( $(e) .prev() .prev() ); if ($(e).index() - 1 == 1) { $(this).prop("disabled", true); } return false; } }); }); const progress = e => { let pos = (parseInt($(e).index()) / steps.length) * 100; if($(e).index() == 1){ prog.parent().show(); } if (pos == 100) { prog.addClass("bg-success"); } prog .attr("valuenow", pos) .css("width", pos + "%"); }; const validate = step => { let inputs = step.querySelectorAll(".validate"); proceed = true; let regex = { string: /^[a-zA-Z ]{2,30}$/, email: /^\[email protected][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/, mobile: /^[0-9]{10,12}$/, notEmpty: /^(?!\s*$).+/, }; $.each(inputs, (i, input) => { let type = ($(input).attr("type") == undefined || $(input).attr("type") == 'checkbox') ? false : true; if (input.value == "") { show_error(input, "Feild is Required"); proceed = false; }else if (type && !regex[ ($(input).attr("data-validate") == undefined) ? "notEmpty" : $(input).attr("data-validate") ].test(input.value) ) { //alert($(input).attr("type")) show_error(input, `Enter a valid ${$(input).attr("name")}`); proceed = false; } else if ($(input).attr("type") == "checkbox") { } else if(proceed && inputs.length == i-1) { proceed = true; } }); }; function show_error(input, msg) { let ind = $(input).attr('name'); if($('#err'+ind).length > 0){ $('#err'+ind).html(msg) }else{ $(input).after( '<div id="err'+ind+'" class="alert alert-danger mt-2 alert-sm">' + msg + "</div>" ); } }
<section> <div class="container"> <div class="row"> <div class="col-md-4 col-xs-12 mx"> <div class="adp-block mt-5 mb-5"> <form> <div class="progress mt-2 mb-2" style="display:none"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div> </div> <div class="step" validation="true"> <p class='status'>Enter Mandatory Info</p> <div class="form-group"> <label>Full Name</label> <input type="text" class="form-control validate" name="full_name" data-validate="string"> </div> <div class="form-group"> <label>Email </label> <input type="email" name="email" class="form-control validate" data-validate="email"> </div><div class="form-group"> <label>Mobile</label> <input type="mobile" class="form-control validate" name="mobile" data-validate="mobile"> </div> </div> <div class="step d-none" validation="true"> <p class='status'>Personal Info</p> <div class="form-group"> <label>Gender</label> <select class="form-control validate" data-validate="notEmpty"> <option value="" class="form-control">---</option> <option value="male">Male</option> <option value="female">Female</option> </select> </div> <div class="form-group"> <label>Skills </label> <p class="checkbox"></p> <div class="form-check"> <input class="form-check-input" type="checkbox" name="skills" value="ruby" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Ruby </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="skills" value="nodejs" id="defaultCheck2"> <label class="form-check-label" for="defaultCheck2"> Node js </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="skills" value="python" id="defaultCheck3"> <label class="form-check-label" for="defaultCheck3"> Python </label> </div> <div class="form-check"> <input class="form-check-input" name="skills" type="checkbox" value="php" id="defaultCheck4"> <label class="form-check-label" for="defaultCheck4"> PHP </label> </div> </div> </div> <div class="step d-none" validation="true"> <div class="form-group"> <label>Company Name</label> <input type="text" class="form-control validate" name="company" data-validate="string" required> </div> <div class="form-group"> <label>Company Email </label> <input type="email" name="company_email" class="form-control validate"> </div><div class="form-group"> <label>Company Mobile</label> <input type="mobile" class="form-control validate" name="company_mobile"> </div> </div> <div class="step end d-none"> <div class="card-body text-center"> <i class="fas fa-check fa-2x text-success"></i> <h4 class="card-title">Thank Tou For Registring with Us</h4> <p class="card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p> <button class="btn btn-success btn-sm">Go to Home</button> </div> </div> <div> <button class="btn btn-primary prev" disabled>Back</button> <button class="btn btn-primary next float-right">Next</button> <input type="submit" class="btn btn-success btn-block d-none"> </div> </form> </div> </div> </div> </div> </section>