1

I have a payment page. At the top of the page I have a standard div with some "Please confrim you agree to the T's & C's" text and a checkbox.

Underneath that there are two separate forms each with a different payment option/button "Pay by cheque" and "pay by card".

Is it possible to validate a checkbox on both form submit buttons as the user can pick the payment option?

Note: The div is outside of both forms. I don't think nested forms are strictly legal.

I'm also using Foundation 6 Framework, considering using the abide, but I'm stuck as to how to validate if the checkbox is checked for both submit buttons.

Any help appreciated.

forms

unrealindeed
  • 83
  • 1
  • 9

4 Answers4

0

If you're not using external library to validate, it's easy to do the next: 

<input type="submit" value="Pay" onclick="return checkIfAgreed();">
<script>
    function checkIfAgreed() {
         // get the check box dom and make sure it's checked
         // then return true if OK or false if not;
    }
</script>
Dabbas
  • 3,112
  • 7
  • 42
  • 75
0

About validate a checkbox on multiple forms

Sure you can. Check the term input checked property and, if not checked, return false to the form submit event.

// The name of your Terms input
var $terms = $('[name="terms"]');

$('form').submit(function(){
  if ( !$terms.prop('checked') ) {
    console.log('Terms not checked');
    return false;
  }
});

JSFiddle

About nested forms

Note: I don't think nested forms are strictly legal.

You absolutely right.

From the html5 working draft:

4.10.3 The form element

Content model:
Flow content, but with no form element descendants.

Answer from here

Community
  • 1
  • 1
Robiseb
  • 1,576
  • 2
  • 14
  • 17
0

Override default's form submit, check if the checkbox is checked and then submit the form.

Example code: 

$(function(){
  $("#form1, #form2").on('submit', function(){
    if($("#terms:checked").length) {
      $(this).submit(); //if checked, submit form
    }
    else {
      alert('Please accept the terms'); //else show form errors
    }
    return false;
  });
});

If you use jQuery validation plugin you can use $("#terms").valid() instead of $("#terms:checked").length.

Here is a simple example I created for you: fiddle

Roumelis George
  • 6,602
  • 2
  • 16
  • 31
0

Thank you all for the quick replies. Having read everyone's answer and reviewed a similar checkbox validation solution I also found the below to work: Not sure what solution is best... but hey, they work! Thank you all :-)

     function checkIfAgreed() {
      if (!document.getElementById('agreeTerms').checked){
       alert('Please confirm you have read and understood the acceptance conditions');
      return false;}
    }
    <input type="checkbox" id="agreeTerms">
    
    <form>
      <input type="submit" value="Option 1" onclick="return checkIfAgreed();">
    </form>
    
    <form>
      <input type="submit" value="Option 2" onclick="return checkIfAgreed();">
    </form>
unrealindeed
  • 83
  • 1
  • 9