How To Practice 3(Three) Footstep Registration Course Of Pedagogy Alongside Javascript Validation

This post helps y'all how to practice uncomplicated too perfect 3 measurement shape alongside Javscript validation using Css3 too Html.Now a days 3 measurement shape is normally used shape inward the webpages because it is real attractive i for the customers because it helps no need to scroll downwards for the bigger type forms. And too 3 measurement shape is captured the information yesteryear the categories, And too this from contains the Progress bar inward the top of the shape it volition done yesteryear using css3 too Jquery for user reference.

This uncomplicated attractive shape volition done yesteryear using css3 too html too validation purpose nosotros used the JavaScript. The shape is processed the validation measurement yesteryear measurement yesteryear clicking the adjacent button. Here convey a in conclusion measurement to verify the all of your shape contents alongside your data. You tin move customize this shape according to your project. I promise this tutorial  is real useful for the developers.

In this event i used the name, electronic mail too province inward the get-go measurement if y'all clicked adjacent push clit without whatsoever information y'all volition teach the validation fault similar the below screenshot.In the adjacent measurement is username too password too confirmation password is given alongside JavaScript validation, the tertiary measurement is verification measurement is to display all your Datas from the form.

This multiple measurement shape is the responsive shape it volition tally all the device because its done yesteryear using bootstrap too html . This multi measurement shape is used to cut down the webpage infinite equally good the user attraction. The below event convey the codes too demo page. Check the below demo page for your ameliorate agreement of this Three(3) Level shape alongside validation.

Html Code Three measurement shape alongside Validation:

<div class="container">
<br><br>
<form class="form-horizontal form">
<div class="col-md-8 col-md-offset-2">  
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="box row-fluid">
<br>
<div class="step">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<select class="form-control" name="country" id="country">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
</select>
</div>
</div>
</div>
<div class="step">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" name="username" value="" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" value="" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="rpassword" class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<input type="password" name="rpassword" class="form-control" id="rpassword" placeholder="Retype password">
</div>
</div>  
</div>
<div class="step display">
<h4>Confirm Details</h4>
<div class="form-group">
<label class="col-sm-2 control-label">Name :</label>
<label class="col-md-10 control-label lbl" data-id="name"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email :</label>
<label class="col-md-10 control-label lbl" data-id="email"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Country :</label>
<label class="col-md-10 control-label lbl" data-id="country"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Username :</label>
<label class="col-md-10 control-label lbl" data-id="username"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password :</label>
<label class="col-md-10 control-label lbl" data-id="password"></label>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<button type="button" class="action btn-sky text-capitalize dorsum btn">Back</button>
<button type="button" class="action btn-sky text-capitalize adjacent btn">Next</button>
<button type="button" class="action btn-hot text-capitalize submit btn">Submit</button>
</div>
</div>
</div>

</div>
<a style="color:#fff; float:right;" href="http://www.publishertrend.com/"><h3>www.sanwebcorner.com</h3></a>
</div>
</form>
</div>

Javascript for 3 measurement shape alongside validation:

<script type="text/javascript">

$(document).ready(function(){

var electrical current = 1;

widget      = $(".step");

btnnext     = $(".next");

btnback     = $(".back"); 

btnsubmit   = $(".submit");

// Init buttons too UI

widget.not(':eq(0)').hide();

hideButtons(current);

setProgress(current);

// Next push clit click action

btnnext.click(function(){

if(current < widget.length){

// Check validation

if($(".form").valid()){

widget.show();

widget.not(':eq('+(current++)+')').hide();

setProgress(current);

}

}

hideButtons(current);

})

// Submit push clit click

btnsubmit.click(function(){

alert("Submit push clit clicked");

});

// Back push clit click action

btnback.click(function(){

if(current > 1){

electrical current = electrical current - 2;

if(current < widget.length){

widget.show();

widget.not(':eq('+(current++)+')').hide();

setProgress(current);

}

}

hideButtons(current);

})

$('.form').validate({ // initialize plugin

ignore:":not(:visible)",

rules: {

mention     : "required",

electronic mail    : {required : true, email:true},

province  : "required",

username : "required",

password : "required",

rpassword: { required : true, equalTo: "#password"},

},

});

});

// Change progress bar action

setProgress = function(currstep){

var per centum = parseFloat(100 / widget.length) * currstep;

per centum = percent.toFixed();

$(".progress-bar").css("width",percent+"%").html(percent+"%");

}

// Hide buttons according to the electrical current step

hideButtons = function(current){

var bound = parseInt(widget.length); 

$(".action").hide();

if(current < limit) btnnext.show();

if(current > 1) btnback.show();

if (current == limit) { 

// Show entered values

$(".display label.lbl").each(function(){

$(this).html($("#"+$(this).data("id")).val());

});

btnnext.hide(); 

btnsubmit.show();

}

}

</script>

SHARE THIS