javascript - Validation between 3 steps in form -
i have form divided in 3 different steps.
i want 2 different things:
focus in input in steps 2 , 3
validation non-empty fields in steps 1 , 2
this code:
window.onload = function() { document.getelementbyid("i_am").focus(); }; var form = document.getelementbyid('register'); form.novalidate = true; form.addeventlistener('submit', function(event) { if (!event.target.checkvalidity()) { event.preventdefault(); document.getelementbyid('youremailidmsg').innerhtml = document.getelementbyid('email_id').value == '' ? 'please enter email' : ''; } }, false); var questionnumber=0; var questions=document.queryselectorall('.notshown'); function next(){ questionnumber++; if(questions.length>questionnumber) { document.queryselector('.shown').classlist.remove('shown'); questions[questionnumber].classlist.add('shown'); } }.notshown { display: none; } .shown { display: block; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form class="" id="register" method="post" action="" > <div id="q0" class="notshown shown form-group"> <div class="form-group"> step 1 <select id="i_am" class="form-control"> <option value="">choose gender</option> <option value="1-1">men</option> <option value="1-2">woman</option> </select> </div> <a class="btn btn-danger" onclick="next()">next</a> </div> <div id="q1" class="notshown form-group"> <div class="form-group"> step 2 <input class="form-control" id="province_id" placeholder="city name" required="required"> </div> <a class="btn btn-danger" onclick="next()" type="submit">next</a> </div> <div id="q2" class="notshown"> <div class="form-group"> step 3 <input type="text" id="email_id" placeholder="your email" required="required"> <div id="youremailidmsg"></div> </div> <button type="submit" class="btn btn-danger" >register</button> </div> </form>run here
https://jsfiddle.net/h7v94mxz/9/
so, rewrote using jquery since included jquery library in question, in fiddle provided.
keep in mind, did not take time make bullet-proof validation standpoint, think should able take have , build on it.
let me know if have questions.
var questionnumber = -1; var questions = $('.notshown'); var inputselector = "input:not(:disabled):not([readonly]), textarea:not(:disabled):not([readonly]), select:not(:disabled):not([readonly])"; var form = $('#register'); form.on("input change propertychange", inputselector, function() { validateinput(this); }); function validateinput(control) { var $control = $(control); if ($control.is("div")) { $control.find(inputselector).each(function() { validateinput(this); }); } else { $control.removeclass("invalid-input"); $control.siblings(".error-message").remove(); if ($control.val() === "") { $errormessage = $("<span/>"); $errormessage.addclass("error-message"); $errormessage.text("value cannot empty!"); $control.addclass("invalid-input"); $errormessage.insertafter($control); } } } function next() { var question = $(questions[questionnumber]); validateinput(question); if (question.find(".invalid-input").length) { // contains invalid inputs, not proceed return false; } else { questionnumber++; question = $(questions[questionnumber]); if (questions.length > questionnumber) { $('.shown').removeclass('shown'); question.addclass('shown'); // focus first input in group question.find(inputselector)[0].focus(); } else { console.log('submitting!'); form.submit(); } } } next();.notshown { display: none; } .shown { display: block; } .invalid-input { border: 1px solid red !important; background-color: pink !important; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <form class="" id="register" method="post" action=""> <div id="q0" class="notshown form-group"> <div class="form-group"> step 1 <select id="i_am" class="form-control"> <option value="">choose gender</option> <option value="1-1">men</option> <option value="1-2">woman</option> </select> </div> <a class="btn btn-danger" onclick="next()">next</a> </div> <div id="q1" class="notshown form-group"> <div class="form-group"> step 2 <input class="form-control" id="province_id" placeholder="city name" required="required"> </div> <a class="btn btn-danger" onclick="next()" type="submit">next</a> </div> <div id="q2" class="notshown"> <div class="form-group"> step 3 <input type="text" id="email_id" placeholder="your email" /> <div id="youremailidmsg"></div> </div> <a type="submit" onclick="next()" class="btn btn-danger">register</a> </div> </form>
Comments
Post a Comment