Hidden checkbox required to be checked even when hidden

Javascript & Ajax
#1

Hello people, how you been?

Well I’m wondering what’s the best way to do this.

I’m using html5 required for a very simple validation, and I have a checkbox that only displays if you meet some conditions. You then have to agree with terms and check the checkbox.

The problem is when you don’t hit conditions and checkbox reminds hidden. but then its not posible to submit. It should only be required if you see it.

.terms{
display: none;
}

<form>

<p><input class="terms" type="checkbox" id="checkId" required>Terms & Conditions</p>
<input type="submit" name="submit" value="Submit" id="submit" />

</form>

What do you think? maybe Is it better to validate using js?

I’ve searched a lot for this.

#2

The js code that unhides the checkbox would add the required attribute to it.

#3

Thanks for your reply.

This is what I did, I already saw this before posting .attr()

So with the idea you gave me, I add required where the condition shows.

$("#checkId").attr('required', '');

Works great, and since you can also delete rows, I added this to not require if you decide to delete the row.

$(document).on('click', 'button.removebutton', function () {
  $(this).closest('tr').remove();
     $("#checkId").removeAttr('required'); 
    checkExtras(); 
    return false;
});

The next code lets me show the divs with terms, and not hidde it. If at least one input makes the condition true, else it used to hide again if you edited it even when there was other input with the condition true.

But I don’t understand this code below, someone else did it and the explanation was to poorly for my level of understanding. I’ve tried to understand or search .each but its not quite expressed has in this example.

I don’t like using something I don’t understand, even it works great.

Could you explain this code:

$('.skillTable').on('change', ".skillSelect", function() {
  checkExtras()
})

function checkExtras() {
  let hasExtras = false;
  
  $(".skillSelect").each(function(i, o) {
    let optgroup = $(o).find(':checked').closest('optgroup').attr('label');
    if (optgroup === 'External Roles') hasExtras = true;
     
  })
  $(".terms").toggle(hasExtras);
}

You helped me with the next part, that I added and worked great and I know how it works.

  // Set a blank value when edit email
  $(document).on('keyup change', `.email${i}`, function() {
	  $(this).closest('tr').find(`.blank${i}`).prop('selected', true);
	  checkExtras();
  });
}

When the user edits his email, blank gets selected, since the select is the one that determinates to show terms or not. and if theres no other condition the terms div gets hidden, and u can reselect again your options and then it shows again or not.

How do I do something similar for the checkbox. I want if you edit and its sets to a blank. to remove “required” only if theres no other input or select that has the condition.

So thats why I guess I need to understand that part that I don’t.

Don’t know if its better to add more code or a fiddle, I just tought it was a simple html css stuff, didn’t wanted to post so much text.

Thanks

#4

The first section attaches an on change event to all the skillSelect class elements in the skillTable class element, to call the checkExtras() function, i.e. any change in a skillSelect select/option menu choice will call checkExtras().

The checkExtras() function basically searches for any checked/selected option choices that are part of an optgroup with a label equal to ‘External Roles’. If any are found, hasExtras is set to a true value. The final line in that function causes any term class element to be displayed if hasExtras is true.

1 Like
#5

The first section attaches an on change event to all the skillSelect class elements in the skillTable class element, to call the checkExtras() function, i.e. any change in a skillSelect select/option menu choice will call checkExtras().

Thanks that was very instructive, I kinda of understand better now. So I’ve watched examples of lots of stuff, red a lot, and tested, and learned some stuff.

I came up to this

  $('.skillTable').on('change', function () {
    checkTheCheckBox()
  });  

  function checkTheCheckBox() {
    let checkTheBox = $("option:selected", this);
    $("#checkId").attr('required', '');
    $(".skillSelect").each(function() {
      if (checkTheBox.parent()[0].label === "External Roles") {
        $("#checkId").attr('required', '');
      } else { 
        $("#checkId").removeAttr('required');
      }
    });
  }

But i don’t know why it dosen’t work like the other one. This one gets messed up depending if you edit the field changes the select, or if you remove all rows with the condition it dosent resets.

Ive added checkTheCheckBox(); to the remove rows and to the .prop select. I think it has to do with the toggle()?

#6

Ok so I took a cup of coffe, and red your first answer again. Then remembered this that I red yesterday about checking visibility is(":visible") and for first time I wrote it on my own with out so much copy, pasting, brute force testing. I did atach it to the other code that you also explained to me. It now works like I wanted.

So now from what I’ve tested, it works fine.

  if ($('.terms').is(":visible") != true) {
    $("#checkId").removeAttr('required');    
  } else {
    $("#checkId").attr('required', '');
  }

a bit more simple, than what I was trying to do before. Just posted it in case someone searches checking the visibility and doing something.

Sponsor our Newsletter | Privacy Policy | Terms of Service