javascript - Validation multiple buttons W/ Alert -
i'm trying create form gathers information regarding users. form has 5 steps:
step 1: user information (name, email, phone, age, gender) step 2: yes or no question step 3: yes or no question step 4: yes or no question step 5: yes or no question
the form allows users go next stage, or go previous step. before allowing user move next step, user must fulfill requirement. validation alert user if question not answered.
how add verification code original javascript, each step have animation , verification.
var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties animate var animating; //flag prevent quick multi-click glitches $(".next").click(function(){ document.getelementbyid('btnnext').addeventlistener('click', function(){ //text inputs if(!document.getelementbyid('fullname').value){ alert('full name required'); return false; } else if(!document.getelementbyid('email').value){ alert('email required'); return false; } else if(!document.getelementbyid('phone').value){ alert('phone number required'); return false; } else if(!document.getelementbyid('age').value){ alert('age required'); return false; } //radio buttons var genderset = false; var genderbtns = document.getelementsbyname('gender'); //console.log(genderbtns); for(var i=0, btn; btn=genderbtns[i];++i){ if(btn.checked){ genderset=true; break; } } if(!genderset){ alert('gender required'); return false } if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addclass("active"); //show next fieldset next_fs.show(); //hide current fieldset style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as opacity of current_fs reduces 0 - stored in "now" //1. scale current_fs down 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs 1 moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes custom easing plugin easing: 'easeinoutback' }); }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeclass("active"); //show previous fieldset previous_fs.show(); //hide current fieldset style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as opacity of current_fs reduces 0 - stored in "now" //1. scale previous_fs 80% 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs right(50%) - 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs 1 moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes custom easing plugin easing: 'easeinoutback' }); }); $(".submit").click(function(){ return false; })<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- fieldsets --> <fieldset> <h2 class="fs-title">step 1</h2> <h3 class="fs-subtitle">background information</h3> <input type="text" id="fullname" name="fullname" placeholder="full name"> <input type="text" id="email" name="email" placeholder="e-mail"> <input type="text" id="phone" name="phone" placeholder="phone"> <input type="number" id="age" name="age" placeholder="age"> <h4>gender</h4> <div class="row"> <div> <input type="radio" name="gender" value="male" id="gender-male"/> <label for="gender-male">male</label> </div> <div> <input type="radio" name="gender" value="female" id="gender-female"/> <label for="gender-female">female</label> </div> </div> <div class="row"> <h4>description</h4> <div class="input-group"> <label for="terms">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. consectetur adipiscing elit, sed eiusmod tempor. </label> </div> </div> <input type="button" name="next" id="btnnext" class="next action-button" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 2 </h2> <h3 class="fs-subtitle">please select 1 of following</h3> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <div> <select name="past" id="past"> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="button" name="next" class="next action-button" id="pastnext" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 3</h2> <h3 class="fs-subtitle">please select 1 of following</h3> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. <div> <select> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="button" name="next" class="next action-button" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 4</h2> <h3 class="fs-subtitle">please select 1 of following</h3> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <div> <select> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="button" name="next" class="next action-button" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 5 </h2> <h3 class="fs-subtitle">please select 1 of following</h3> can come location?<br> <br> <br> <div> <select> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br><br><br> <div class="row"> <h4>terms , conditions</h4> <div class="input-group"> <input id="terms" type="checkbox"> <label for="terms">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. </label> </div> </div> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="submit" name="submit" class="submit action-button" value="submit" /> </fieldset>my verification code:
$("#pastnext").click(function(event){ var validate = $("#past").val(); if(validate=="") { event.preventdefault(); alert("you have not selected option"); } });
Comments
Post a Comment