Question

Forms Pagination - Show Checkmark when section(tab) completed

Forms

Updated September 25, 2015

asked on September 4, 2015

I am looking to take the Forms Pagination piece a bit further... I've added the functionality to disable the buttons until all required fields are completed, but now I'm looking for some sort of progress notification to mark the section 'Complete' when they move on to the next section. Below is the javascript I've put together, but cannot get it to function properly... Any help/advice is much appreciated.

CSS:

.navbar .completed{background-color:red;}

Javascript:

 $('.sections, .Submit').hide();

$('.navitem').on('touchstart click', function () {

//validate whether the required fields are filled
 var valid = true;
 		$('#form1 input, #form1 textarea, #form1 select').filter(':visible').each(function() {
 	if(!$(this).checkValidity()) {
 valid = false;
 }
 });
 	if(!valid) { return;} 
		$('.sections, .Submit').hide();
		$('.navbar').find('.navitem').removeClass('selected');
  if ($(this).hasClass('info')) {
 		$('.section1').show();
 		$('.navbar').find('.info').addClass('selected', 'completed');

What I'd like to display when all required fields are filled in, but not when there are still fields needing input

1 0

Answer

SELECTED ANSWER

replied on September 24, 2015 • Show version history

Hi Nate,

So you want the red background and the checkmark to be added to the navitem after navigate away from this page, right?

Here is the suggestion:

First, add a checkmark (I used ✔ for the checkmark)

<span class="check">✔</span>

to the navitem, and the html source should look like this:

<div class="navitem info"><span class="check">✔</span>Your Info</div>

Second, change the JavaScript like this (replace the code you provided):

  $('.sections, .Submit, .check').hide();

  $('.navitem').on('touchstart click', function () {
    //validate whether the required fields are filled
    var valid = true;
 	$('#form1 input, #form1 textarea, #form1 select').filter(':visible').each(function() {
      if(!$(this).checkValidity()) {        
         valid = false;
      }
 	});
 	if(!valid) { return;} 
    $('.navbar .selected').addClass('completed');
    $('.navbar .selected .check').show();
    
    $('.sections, .Submit').hide();
    $('.navbar').find('.navitem').removeClass('selected');
  	if ($(this).hasClass('info')) {
 		$('.section1').show();
                $('.navbar .info .check').hide();
 		$('.navbar').find('.info').addClass('selected');

3 0

Replies

replied on September 25, 2015

This is exactly what I was looking for! Thank you Rui!!

0 0

You are not allowed to follow up in this post.

Question

Question

Forms Pagination - Show Checkmark when section(tab) completed

Answer

Replies

Sign in to reply to this post.