Jquery Validation

Shopify Partner
1 0 1

Hi All,

I'm looking to install jquery validation (http://jqueryvalidation.org/documentation) on the default shopify contact form.

It's not working as expected - perhaps(?) because the shopify {{form}} tag is inserting a novalidate="novalidate" tag.

Has anyone had any success with this particular plugin?  If so, how did you successfully install it?

Cheers :)

1 Like
Shopify Staff (Retired)
Shopify Staff (Retired)
130 0 18

Hey there,

The validate plugin worked for me. The steps I took:

- Uploaded the jquery.validate.min.js file to my theme assets

- Placed this code at the bottom of theme.liquid

{{ 'jquery.validate.min.js' | asset_url | script_tag }}

<script type="text/javascript">
    $(".contact-form").validate();
</script>

- Modified my contact form to include "required" at the end of my inputs:

<input required type="text" value="" name="contact[phone]" id="contact_phone" required />

I hope that helps! :)

2 Likes
New Member
2 0 0

Hi, your solution doesn't work for me. I'm trying to validate a custom input on a product form. Here is the code that I've added before the end of my body tag on the theme.liquid file.

 

<script src="{{ 'jquery.validate.min.js' | asset_url }}"></script>

<script type="text/javascript"> 
  $("#product_form_"{{ product.id }}"").validate();
</script>

Here is the code for my product form:

 

{% if section.settings.show_payment_button %}
  {% assign show_payment_button = true %}
{% elsif show_payment_button_quickshop %}
  {% assign show_payment_button = true %}
{% else %}
  {% assign show_payment_button = false %}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

<div class="clearfix product_form init smart-payment-button--{{ show_payment_button }} {% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %} product_form--{{ settings.product_form_style }}"
      id="product-form-{{ product.id }}"
      data-product-form
      data-money-format="{{ shop.money_format }}"
      data-shop-currency="{{ shop.currency }}"
      data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
      data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
      data-product="{{ product | json | escape }}"
      {% if settings.limit_quantity or settings.display_inventory_left %}
        data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
      {% endif %}
      data-product-id="{{ product.id }}"
      >
  {% form 'product', product %}

  {% if product.options.size > 1 %}
    <div class="select">
      <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
        {% for v in product.variants %}
          <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
        {% endfor %}
      </select>
    </div>
  {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
    <div class="select">
      <label>{{ product.options[0] }}</label>
      <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
        {% for v in product.variants %}
          <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
        {% endfor %}
      </select>
    </div>
  {% else %}
    <input type="hidden" name="id" value="{{ variant.id }}" />
  {% endif %}

  {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
    <div class="swatch_options">
      {% for option in product.options %}
        {% include 'product-swatch' with option %}
      {% endfor %}
    </div>
  {% endif %}

  {% if product.available %}
    {% if settings.display_inventory_left %}
      <div class="items_left">
        {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
          {% capture items_left_text %}
            {% if variant.inventory_quantity == 1 %}
              {{ 'products.product.items_left_count.one' | t }}
            {% else %}
              {{ 'products.product.items_left_count.other' | t }}
            {% endif %}
          {% endcapture %}
          {% if variant.inventory_quantity <= settings.inventory_threshold %}
            {{ variant.inventory_quantity }} {{ items_left_text }}
          {% endif %}
        {% endif %}
      </div>
    {% endif %}

  <p class="line-item-property__field">
  <label for="your-city">Your City</label>
  <input required class="required" id="your-city" type="text" name="properties[Your City]" placeholder="Enter Your City">
</p>
  
    <div class="purchase-details">
      {% if settings.display_product_quantity %}
        <div class="purchase-details__quantity product-quantity-box">
          <label for="quantity">{{ 'products.product.quantity' | t }}</label>
          <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
          <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
          <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
        </div>
      {% endif %}
      <div class="purchase-details__buttons purchase-details__spb--{{ show_payment_button }}">
        {% if settings.cart_action == 'reload_page' %}
          <input type="hidden" name="return_to" value="back" />
        {% elsif settings.cart_action == 'redirect_checkout' %}
          <input type="hidden" name="return_to" value="/checkout" />
        {% endif %}

        {% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
        <button type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
          <span class="text">{{ add_to_cart_label }}</span>
          <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
            <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
          </svg>
        </button>
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    </div>
  {% endif %}
{% endform %}
</div>
0 Likes