表单提交时未选中必填复选框

Question

我已经用我的 bigcartel 在线商店模板玩了将近一个星期，继续编辑一个已经存在的主题以符合我的想象。

为了符合我所在国家/地区关于在线销售的法律要求，我需要包含一个复选框，表明我的客户已阅读、理解并接受我的商店的条件条款 - 总而言之 - 没有人阅读的部分完全没有：D

首先，我尝试在该部分中插入一个带有一些文本的复选框，然后

<input id="agb_check" name="agb_check" type="checkbox" required /><span id="agb_txt">SOME TEXT.</span>

然而，这并没有影响我的提交按钮，而是我的“刷新”按钮，用于计算运费，一旦你选择了一个国家。

接下来，我尝试通过向我的提交按钮添加一个 onclick 事件处理程序来阻止页面加载：

<button id="checkout-btn" class="button" onclick="validiere()" title="Checkout" type="button">Checkout</button>

并将此脚本添加到我的头部：

function validiere(){ 
    if(document.getElementById("agb_check").checked){
        document.getElementById("cart-form").submit();
    } 
    else {
        window.stop();
        document.getElementById("agb_text").style.color="red";
    }
}

好吧-那也没有用。

你们有什么建议吗？

该网站是：explore.dlld-fashion.de

基本上，当您尝试重新计算运费时出现的“需要复选框”弹出窗口将是完美的。

感谢您的宝贵时间和来自德国的问候！

丹尼兹

HTML 表单代码：

     <form id="cart-form" {% unless cart.shipping.enabled or cart.discount.enabled %}class="no_options"{% endunless %} method="post" action="/cart">
  <div id="cart_description">
    <section id="cart_items">
      <ul>
        {% for item in cart.items %}
        <li class="cart_item {% unless item.product.has_default_option %}with_option{% endunless %}" id="item-{{ item.id }}">          
          <div class="item_image"><img src="{{ item.product.image | product_image_url size:"thumb" }}" alt="Photo of {{ item.name }}"></div>          
          <dl>
            <dt><a href="{{ item.product.url }}">{{ item.product.name }}</a></dt>
            <dd class="item_price">{{ item.unit_price | money_with_sign }}{% if item.quantity > 1 %}<span class="item_quantity">(x{{ item.quantity }})</span>{% endif %}</dd>
            <dd class="quantity_input" style="display:none">{{ item | item_quantity_input }}</dd>
            {% unless item.product.has_default_option %}<dd class="item_option">{{ item.option.name }}</dd>{% endunless %}
          </dl>

          <a href="#" class="remove_item" title="Remove item from cart">Remove item</a>
        </li>
        {% endfor %}         
      </ul>
    </section>

    {% if cart.shipping.enabled or cart.discount.enabled %}
    <section id="cart_options">
      <ul>
        {% if cart.shipping.enabled %}
        {% if cart.shipping.strict %}
        <li id="shipping_option">
          <label for="country">Shipping</label>
          {{ store.country | country_select }}

          {% if cart.shipping.pending %}
            {% if cart.country %}
            <span class="no_shipping">We don't ship to {{ cart.country.name }}</span>
            {% endif %}
          {% endif %}
        </li>
        {% endif %}
        {% endif %}

        {% if cart.discount.enabled %}
        <li id="cart_discount" class="cart_item">
          {% if cart.discount.pending %}
            <label id="cart_discount_label" for="cart_discount_code">Discount</label>
            {{ cart.discount | discount_code_input }}
          {% elsif cart.discount.free_shipping %}
             <label for="cart_discount_code">Discount</label>        
            <p>{{ cart.discount.name }}</p>         
          {% else %}
            <label for="cart_discount_code">Discount</label>        
            <p>{{ cart.discount.name }}</p>
          {% endif %}
        </li>
        {% endif %}
      </ul>

      <div class="cart-update">
        <button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
      </div>    
    </section>
    {% endif %}
  </div>

  <section id="cart_summary">
    <ul>
      <li>
        <h3>Items</h3>
        <span>{{ cart.subtotal | money_with_sign }}</span>
      </li>
      {% if cart.shipping.enabled %}
      <li id="cart-shipping-tax">
        <h3>Shipping</h3>
        {% if cart.shipping.pending %}
          {% if cart.country %}
          <span class="shipping-amount">Select another country</span>
          {% else %}
          <span class="shipping-amount">Select country</span>
          {% endif %}
        {% else %}
          <span class="shipping-amount">{{ cart.shipping.amount | money_with_sign }}</span>
        {% endif %}
      </li>
      {% else %}
      <li id="cart-shipping-tax" class="not_set">
        <h3>Shipping</h3>
        <span>Applicable fees apply</span>
      </li>        
      {% endif %}

      {% if cart.discount.enabled %}
        {% if cart.discount.pending %}

        {% elsif cart.discount.free_shipping %}
        <li>
          <h3>Discount</h3>
          <span>Free shipping!</span>
        </li>
        {% else %}
        <li>
          <h3>Discount</h3>
          <span>-{{ cart.discount.amount | money_with_sign }}</span>
        </li>
        {% endif %}
      {% endif %}
      <li id="cart_total">
        <h3>Total</h3>
        <h2>{{ cart.total | money_with_sign }}</h2>
      </li>                              
    </ul>

    <button id="checkout-btn" class="button" onclick="validiere()" title="Checkout" type="button">Checkout</button>

  <input id="agb_check" name="agb_check" type="checkbox" required /><span id="agb_txt">Hiermit erkläre ich mich mit den geltenden AGB's einverstanden.</span>


  </section>
</form>

Answer 1

如果您将函数更改为以下内容，它应该可以工作：

function validiere(){ 
    if(document.getElementById("agb_check").checked){
        document.getElementById("cart-form").submit();
    } 
    else {
        document.getElementById("agb_text").style.color="red";
    }
    return false;
}

Answer 2

可以从表单的提交按钮调用验证函数。如果验证失败，它应该返回 false。

Answer 3

写

$("#checkout-btn").click(function(event)
    {
        event.preventDefault();
    });

防止默认行为（提交）

还有，只是

document.getElementById('theFormId').onsubmit = function() {                
            if(!validate())
                return false;
            }   
            else{
             return true;
            }
} 

应该可以。