复选框显示错误

Question

如果用户在未选中此复选框的情况下尝试离开页面，我需要让它显示错误。它除了视觉之外没有其他用途，有没有办法实现这样的事情？

<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>

附加的 CSS 仅用于样式，没有必要张贴。

我试过了：

{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}

在复选框之前的标记中输入了这个，但它不想工作。

更新：

除了给出的答案，这里是表单提交代码..

{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}

谢谢。

Answer 1

是的。使用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.
    }
});

)};

这里有一点tutorial to get you started，如果您一开始不知道该使用什么，请不要担心。只需学习选择器并慢慢向上工作。这将是一项值得的投资:)

您现在如何提交表单？ 如果它只是一个提交按钮，您可以使用 jquery 将点击事件添加到提交按钮，并在您不希望按钮提交时返回 false。

Answer 2

[“Salgs og Leveringsvilkår er lest og akseptert”（瑞典语？挪威语？）是关于接受条款和条件。]

我希望它不只是为了展示。您还需要检查服务器端用户是否已接受您的条款。

要进行客户端表单检查，您需要使用 JS 覆盖提交按钮的操作，检查数据（如 melaos 演示的，尽管不需要 jQuery），并在每个表单元素旁边显示 cmets。真的有点痛。你必须在服务器端重新验证它，以防 JS 被意外（或没有）禁用。