Checkbox show error.

Question

Hi, I need to make this show an error if the user tries to leave the page without checking this tickbox. It has no other use other than visual, is there a way to implement such a thing?

<span>
        <input value="1"  type="checkbox" name="salgsvilkar" ID="checkbox2"  style="float:left;"
        onclick="document.getElementById('scrollwrap').style.cssText='
border-color:#85c222; 
background-color:#E5F7C7;';" />
<label for="checkbox2" class="akslabel">
Salgs og leveringsvilkår er lest og akseptert
</label>
     </span>

Attached CSS is just for styling, no point posting it up.

I have tried:

{literal}
            <script type="text/javascript">
if ($("#checkbox2").val()==1){
  alert('Please accept the terms of sale');
  //or you can use other method of showing the error. lightbox? showing error msg on a span, etc.
}

</script>
  {/literal}

Entered this in the markup just before the checkbox, but it doesn't want to work.

UPDATE:

Further to answers given, here is the form submit code..

{form action="controller=checkout action=payOffline query=id=$method" handle=$offlineForms[$method] method="POST"}
        {include file="block/eav/fields.tpl" fieldList=$offlineVars[$method].specFieldList}
        <div id="handel_fortsett_btns">

        <p class="submit">




    <a href="{link route=$return}" class="continueShopping" title="Fortsett å handle"><span><span><span><span>&nbsp;</span></span></span></span></a>

        <input type="hidden" name="step" value="{$step}" />
        <label></label>
        <button type="submit" class="submit" name="{$method}" id="fullfor_btn" title="Fullfør bestillingen nå" value="">&nbsp;</button>
    </p>

    </div>


    {/form}

Thanks.

Answer 1

Yes. use jquery.

$(document).ready(function() {    

//this should capture your submit button click event and the return false will stop the submission.
$("#fullfor_btn").click(function(){
    if ($("#checkbox2").val()==1){
      alert('your error msg');
      //or you can use other method of showing the error. lightbox? showing error msg on a span, etc.
      return false; //or use other method to stop your form from submitting.
    }
});

)};

and here's a bit of tutorial to get you started, don't fret it if you don't know what to use at first. just learn the selector and slowly work your way up. it will be a worthwhile investment :)

and how are you submitting the form now? if it's just a submit button you can use jquery to add the click event to the submit button and return false when you don't want the button to submit.

Answer 2

["Salgs og leveringsvilkår er lest og akseptert" (Swedish? Norwegian?) is about accepting terms and conditions.]

I hope it is not just for display. You need to check server-side too that the user has accepted your terms.

To do client-side form checking, you will want to use JS to override the submit button's action, check the data (as melaos demonstrates, though jQuery is not needed), and display the comments next to each form element. A bit of a pain really. You have to re-validate it all server-side too in case JS is accidentally (or not) disabled.