表单验证错误消息无效

时间:2015-07-14 14:39:40

标签: jquery forms validation field required

我以前在我的购物车中添加了一些自定义代码,用于制作beautifly。在某些时候,未填写必填字段时显示的错误消息已停止工作。

以下是代码:(包含HTML修订)

{% assign choices = "Other, Affiliate, Returning Customer, Practitioner, Dr. Ulan, Dr. Shallenberger, Dr. Dennis Courtney, WBAI - Take Charge of your Health Radio, Chek Institue, BodyHealth Newsletter, Yasmine Marca, Ben Greenfield, Steve Ilg, Tawnee Prazak, ABC4U, Natural Awakenings, Email Advertisment, Facebook, Twitter, Google, Forum, Friend, Letter, Optimum Healt Report, Townsend Letter, Autism Avenue" %}
{% assign required = true %}

<div class="form-vertical">
<p>
<select style="margin-left: 0px;" class="six columns" id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]" >
<option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
{% assign optionsArray = choices | split: ',' %}
{% for o in optionsArray %}
{% assign option = o | strip %}
<option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
{% endfor %}
<option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
</select>
</p>
<p style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none;{% endunless %}">
<label style="text-align: left;" class="three columns mobile_left alpha" for="how-did-you-hear-about-us-other">Where?:</label>
<input class="six columns" id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}" />
</p>
<p style="{% unless cart.attributes.how-did-you-hear-about-us == 'Affiliate' %}display:none;{% endunless %}">
<label style="text-align: left;" class="three columns mobile_left alpha" for="how-did-you-hear-about-us-affiliate">Who?:</label>
<input class="six columns" id="how-did-you-hear-about-us-affiliate" type="text" name="attributes[how-did-you-hear-about-us-affiliate]" value="{{ cart.attributes.how-did-you-hear-about-us-affiliate }}" />
</p>
</div>


<script>
jQuery(function($) {
  $('#how-did-you-hear-about-us').change(function() {
    if ($('#how-did-you-hear-about-us').val() == 'Other') {
      $('#how-did-you-hear-about-us-other').parent('p').show();
    } else {
      $('#how-did-you-hear-about-us-other').val('').parent('p').hide();
    }
  });
    $('#how-did-you-hear-about-us').change(function() {
    if ($('#how-did-you-hear-about-us').val() == 'Affiliate') {
      $('#how-did-you-hear-about-us-affiliate').parent('p').show();
    } else {
      $('#how-did-you-hear-about-us-affiliate').val('').parent('p').hide();
    }
  });
  {% if required %}
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    var validated = true;
    if ($('#how-did-you-hear-about-us').val() == '') {
      validated = false;    
    }
    else if ($('#how-did-you-hear-about-us').val() == 'Affiliate') {
      if ($('#how-did-you-hear-about-us-affiliate').val() == '') {
        validated = false; 
        $('#how-did-you-hear-about-us-affiliate').addClass('error');
      } 
    }
    if(validated){
      $(this).submit();
    }
    else{
      alert("Please tell us how you heard about us.");
      return false;
    }
  });
  {% endif %}
});
</script>

如果重要,我正在使用Shopify商店。此外,我不介意制作一个弹出窗口或弹出消息,以使其更突出。

目前我没有收到任何错误消息,只是没有任何反应。但是,人们无法单击Checkout,因为他们没有意识到这是必填字段。所以他们认为这个网站已经坏了。

感谢所有帮助。

0 个答案:

没有答案