javascript code for required checkbox

Question

I have a website and I'm trying to make my (extra cost) checkboxes required before proceeding to checkout with paypal. The checkboxes, when clicked, add extra money to the total price as well (not sure if that affects anything). I also cannot find the name= field for the checkboxes so I used id= which I'm sure is completely wrong. Sorry I am extremely new with this.

ALSO NOTE - after my checkbox form I have to go through 2 more pages of clicking a book now button before I arrive at the SUBMIT checkout button... not sure if this stops anything from working correctly? –

I have added the following to my custom css:

    <form action="../" onsubmit="if (this.package-44.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
<p><input type="checkbox" id="package-44" value="add" required="required" /></p>
<p><input type="submit" name="woocommerce_checkout_place_order" value="Proceed to PayPal" required="required" /></p>
</form>

I posted this in footer.php of my theme:

    $('#formTemplate').submit(function() {
    if (!attributeSupported("required") || ($.browser.safari)) {
   //If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
        $("#formTemplate [required]").each(function(index) {
        if (!$(this).val()) {
        //If at least one required value is empty, then ask to fill all required fields.
          alert("Please fill all required fields.");
          return false;
        }
      });
    }
    return false; //This is a test form and I'm not going to submit it
 });

I have also changed the inputs to <required="required" />on the backend of my checkbox input. This is still not stopping me from proceeding with my checkout. any more help is appreciated.

score 0 · Answer 1 · answered Mar 15 '16 at 14:09

0

if I understand you that the checkbox is required. Is it?

Just change the checkbox line:

<p><input type="checkbox" id="package-44" value="add" required ></p>

answered Mar 15 '16 at 14:09

Leandro Araujo

43
1
6

Will not work for [IE < 10](http://caniuse.com/#search=required), this could be an issue – empiric Mar 15 '16 at 14:11
try
– Leandro Araujo Mar 15 '16 at 18:17

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

There is a simple html code for required for html inputs.

add required="required" to the input element. Example:

<input type="checkbox" required="required" />

When you submit the form, and the checkbox isn't checked, the browser will give you an alert to inform you that you need to check the checkbox element.

And because you want to do this in javascript, you can take a look at this answer: How to set HTML5 required attribute in Javascript?

EDIT: See comment from Marko below about checking the submitted forms with the required tags.

edited May 23 '17 at 12:14

Community

1
1

answered Mar 15 '16 at 14:15

node_modules

4,790
6
21
37

Note that even though you can add the ``required`` attribute on the frontend, you always need to also check for the checkbox in the backend, as the HTML5 form validation features such as ``required`` and the ``email`` input type can be easily bypassed by a fishy browser. You always need to validate everything on the backend - the form errors you catch with the frontend are just a nice bonus. – Marko K Mar 15 '16 at 14:18
I tried this as well, still not working, its allowing me to proceed through checkout still. – Harmonyll2 Mar 15 '16 at 15:10

javascript code for required checkbox

2 Answers2