Question

我们在Shopify的添加到购物车表单中添加了一些自定义字段，并尝试添加一些验证。我们已经编写了自定义验证函数，并尝试使用下面的代码绑定它，我们在body标签中放置了theme.liquid：

jQuery(function($) {
  $('#AddToCartForm').submit(function() {
      console.log("Validation called");
      return false;
  });
});

我们修改了表单添加到购物车表单以获得AddToCartForm ID。但是，从不调用此函数。仅记录$（'＃AddToCartForm'）表明选择器正常工作。我们还尝试将其移至产品液体页面，只是形式接近标签，但这并没有改变任何东西。我们还尝试使用

绑定到提交按钮本身

e.preventDefault();
e.stopPropagation();

停止提交表单，但这也不起作用。但是，它确实绑定并正确调用函数，它只是不会停止提交。我们一直在努力解决这个问题，完全没有想法，任何帮助都非常感谢。

编辑：

我们实际上也尝试过使用onSubmit，所以代码是：

<form onSubmit='return test()'>

js是：

function test() {
  console.log("Validation called");
  return false;
}

此功能也从未被调用过。

我们尝试过的另一件事是将添加到购物车按钮更改为：

<button type="button" name="add" id="AddToCart" class="btn">

这

<button type="submit" name="add" id="AddToCart" class="btn">

然后调用$（'＃AddToCartForm'）。submit（）如果验证通过，那么主要问题是有人可以从控制台调用$（'＃AddToCartForm'）。submit（）来提交表单并绕过所有验证..

我们当前的验证脚本是：

jQuery(function($) {
  $('#AddToCart').click(function(e) { //Changed this to the ID of the submit button and changed .submit to .click
    console.log(e);
    e.preventDefault();
    e.stopPropagation();
    var formIsValid = true;
    var message = "Please fill this out and you will be able to add the item to your cart.";
    /* Changed this to the ID of the form itself */ $('#AddToCartForm').find('[name^="properties"]').filter('.required, [required="required"]').each(function() {
      $(this).removeClass('error');
      if (formIsValid && $(this).val() == '') {
        formIsValid = false;
        message = $(this).attr('data-error') || message;
        $(this).addClass('error');
      }
    });
    if (formIsValid){
      $('#AddToCartForm').submit();
      return true;
    }
    else {
      alert(message);
      return false;
    }
  }).find('input, select, textarea').focus(function() {
    $(this).removeClass('error');
  });
});

它基于：https://help.shopify.com/themes/customization/products/get-customization-information-for-products#require-fields和https://gist.github.com/carolineschnapp/11167400

shopify表格的HTML是：

<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
  <select name="id" id="productSelect" class="product-single__variants">
    {% for variant in product.variants %}
    <option {% unless variant.available %} disabled="disabled" {% endunless %} {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
    {% endfor %}
  </select>

  <div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
    <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
    <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
  </div>

  <button type="submit" name="add" id="AddToCart" class="btn">
    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    </button>
</form>

Answer 1

我认为你可以通过旧学校的javascript功能来做到这一点。

function checkForm() {       
   //What ever you want to check
   console.log("Validation called");
   return false;
}

并在表单中调用带有return的函数

<form id="AddToCartForm" action="" onsubmit="return checkForm()">
..
</form>

Answer 2

您的表单字段和分配的功能似乎有问题。这是缩短版本。

$(function(){
  $('form').on('submit',function() {
    var formIsValid = true;
    var message = "Please fill this out and you will be able to add the item to your cart.";
    $(this).find('[name^="properties"]').filter('.required, [required="required"]').each(function() { // Filter appears to be wrong here. Since you are going with manual form validation, use class="required" instead of attribute "required" in form HTML
      $(this).removeClass('error');
      if (formIsValid && $(this).val() == '') {
        formIsValid = false;
        message = $(this).attr('data-error') || message;
        $(this).addClass('error');
      }
    });
    if (!formIsValid) alert(message)
    return formIsValid
  }).find('input, select, textarea').focus(function() {
    $(this).removeClass('error');
  });
})

尝试一下：https://jsfiddle.net/xewsw2t8/8/

Answer 3

Shopify确实覆盖了所有表单提交事件，这非常令人沮丧。我最终试图跟踪联系表单（最简单的一个），以找出这些神秘的AJAX调用来自哪些欺凌我的提交代码。原来他们来自 app.js.liquid 文件。这是联系表单示例：

  var $notify_form = $('.notify_form .contact-form');
  $notify_form.each(function() {
    var $nf = $(this);
    $nf.on("submit", function (e) {
      if($nf.find('.notify_email').val() != "") {
        $.ajax({
            type: $nf.attr('method'),
            url: $nf.attr('action'),
            data: $nf.serialize(),
            success: function (data) {
              $notify_form.fadeOut("slow", function(){
                $nf.prev('.message').html({{ 'products.notify_form.post_success' | t | json }});
              });
            }
        });
      } else {
        $nf.prev('.message').html({{ 'products.notify_form.post_error' | t | json }});
      }  
      e.preventDefault();
    });
  });

遵循上面的精确结构，我得到了一个工作解决方案，用于表单验证。希望这会有所帮助！

用于添加到购物车表单提交的验证功能

3 个答案: