Add class to form div if scrolled together with validation

JavaScript
1

Hallo,
i would like to inform guest that he skip important input section.
That’s why i want to change background color div to some else when he scroll and did not checked any one input or write text to input

I wrote some like this

$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#questrow1').offset().top - -100) && document.getElementsByClassName("wiztype").checked = false; {
            $("#questrow1").addClass('redback');
		}
    });
});

Without

&& document.getElementsByClassName("wiztype").checked = false;

Colorize is fine but checking inputs must works.
What i’m doing wrong?

2

Hi @kontakt70, what you have written here is an assignment (so you’d un-check an element); the equality comparison goes like ===. Also, .getElementsByClassName() returns a node list, but you can only do that check on single elements. I’d suggest to use .querySelector() here instead, which will return the first match:

if (document.querySelector('.wiztype').checked === false) {/* ... */}
3

Thank You, so how can i connect scroll and validation?
Now i have this:

<script>
$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#questrow1').offset().top - -100) && (document.querySelector('.wiztype').checked === false) {
            $("#questrow1").addClass('redback');
		}
    });
});
</script>

But doesn’t work

4

Ah… another problem is that you have to add the scroll event listener to the window, not the document… try

var questrow = document.querySelector('#questrow1')
var wiztype = document.querySelector('.wiztype')

window.addEventListener('scroll', function () {
  if (window.pageYOffset >= questrow.offsetTop + 100 && !wiztype.checked) {
    questrow.classList.add('redback')
  }
})

BTW are you sure you want to add 100 when doing the check (as a - -b === a + b)?

5

It doesn’t work, but maybe i can use toogle class for inputs?
when inputs doen’t have class checked, parent div got new class after scroll?

$('input').on('click', function(e) {
      $(this).toggleClass("checked");
    });

$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#questrow1').offset().top - -100) && !$('#questrow1 input').hasClass('checked') {
            $("#questrow1").addClass('redback');
		}
    });
});

It doesn’t work, but maybe it’s the simplest way?

6

You still have to add the event listener to the window, not the document… ;-) other than that, it’s a bit hard to tell without seeing the actual markup. Can you maybe set up a fiddle or something like that?

7

I’m so close :slight_smile:

Script working fine, but i would like to delete redback class after checked any field.

EDIT

OK, i have done, if somebody wont to do the same function , this is the code:

<script>
$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#questrow1').offset().top - 100 && !$('#questrow1 input').hasClass('checked')) {
            $("#questrow1").addClass('redback');
		}
		$('input').on('click', function(e) {
      		$('#questrow1').removeClass("redback");
    	});
    });
});
</script>

Thanks for help

8

Both fields are required , however in case you post the form you’ll best see an mistakes for the first area.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.