Multiple Required Fields on Add-To-Cart using Form Field Validation Snippet

carlwinanscarlwinans Member
in Help edited February 2013
Hello, I'm setting up required fields using the form validation snippet in the wiki found here.

I was able to get it to work for one field (in this case, the Recipient Name field). However, I'm unsure how to use this code to require more than one field on the page. As you can see here, I have many fields on the page that I need to set as required.

I'm using version 1.0 of foxycart (jarc.foxycart.com)

This is the code I'm currently using:
<!-- REQUIRED FIELDS -->
<script type="text/javascript" charset="utf-8">
custom_validation = function(e, arr) {
    var errors = 0; // Let's set a variable called 'errors', and set the value to 0.
 
    // This is where you can set the input(s) that you'd like validated
    var recipientname = jQuery(e).find('select[name="Recipient_Name"]')[0];
 
    // Here we'll count the errors, and allso apply an .error class if you want to style the input to alert the user
    if (!jQuery(Recipient_Name).val()) {
        errors++;
        jQuery(Recipient_Name).addClass('error');
    }else{
        jQuery(Recipient_Name).removeClass('error');
    }
 
    if (errors > 0) {
        alert('Please complete all required fields');
        return false;
    } else {
        return true;
    }
}
fcc.events.cart.preprocess.add(custom_validation);
</script>
<!-- END FIELDS -->

Thank you in advance for your assistance!
Carl
Comments
  • fc_adamfc_adam FoxyCart Team
    @carlwinans,

    Essentially you'll be duplicating these lines for each field you require:
    if (!jQuery(Recipient_Name).val()) {
      errors++;
      jQuery(Recipient_Name).addClass('error');
    }else{
      jQuery(Recipient_Name).removeClass('error');
    }
    

    So for example, the following would require the recipient name and address. Note that I changed the set up a little:
    if (!jQuery("input[name='Recipient_Name']").val()) {
      errors++;
      jQuery("input[name='Recipient_Name']").addClass('error');
    }else{
      jQuery("input[name='Recipient_Name']").removeClass('error');
    }
    if (!jQuery("input[name='Recipient Street Address']").val()) {
      errors++;
      jQuery("input[name='Recipient Street Address']").addClass('error');
    }else{
      jQuery("input[name='Recipient Street Address']").removeClass('error');
    }
    
  • Thank you so much for your assistance! We'll be trying this out today and I'll let you know if we have any further questions. Have a great day!
    Carl
  • fc adam, I am attempting to add form validation to my site lostnationarchery.com, see below of my implementation, can't seem to get it to work. Note this is for a single <select> but I would like to implement validation on other items that have multiple <select> boxes.
    <!-- REQUIRED FIELDS -->
    <script type="text/javascript" charset="utf-8">
    custom_validation = function(e, arr) {
        var errors = 0; // Let's set a variable called 'errors', and set the value to 0.
     
        // This is where you can set the input(s) that you'd like validated
        var right-left = jQuery(e).find('select[name="right-left"]')[0];
     
        // Here we'll count the errors, and allso apply an .error class if you want to style the input to alert the user
        if (!jQuery(right-left).val()) {
            errors++;
            jQuery(right-left).addClass('error');
        }else{
            jQuery(right-left).removeClass('error');
        }
     
        if (errors > 0) {
            alert('Please choose a Widget!');
            return false;
        } else {
            return true;
        }
    }
    fcc.events.cart.preprocess.add(custom_validation);
    </script>
    <!-- END FIELDS -->
    
    
    <p>Right/Left</p>
    <select name="right-left" id="right-left" size="1">
    <option value=" " selected="selected"></option>
    <option value="right">Right</option>
    <option value="left">Left</option>
    <option value="string only{p-69}">String Only (-$69)</option>
    </select>
    

    product using above code seen at link below

    http://lostnationarchery.com/index.php/product/view/ams_retriever_pro_reel

    ExpressionEngine is my CMS
  • fc_adamfc_adam FoxyCart Team
    @mikesudyk,

    You can't have a dash in a variable name - so "var right-left" will need to be "var rightleft" and any other reference to that variable will need to change too.

    You'll also want to change the way you're checking if a value is set. Give this a try:
    // This is where you can set the input(s) that you'd like validated
        var rightleft = jQuery(e).find('select[name="right-left"]')[0];
     
        // Here we'll count the errors, and allso apply an .error class if you want to style the input to alert the user
        if (jQuery(rightleft).length == 1) {
          if (jQuery(rightleft).val() == " ") {
            errors++;
            jQuery(rightleft).addClass('error');
          } else {
            jQuery(rightleft).removeClass('error');
          }
        }
    
  • thank you for the quick response! I tried what you suggested but don't seem to have any luck. Anything else that could be causing the error?
    <!-- REQUIRED FIELDS -->
    <script type="text/javascript" charset="utf-8">
    custom_validation = function(e, arr) {
        var errors = 0; // Let's set a variable called 'errors', and set the value to 0.
     
    // This is where you can set the input(s) that you'd like validated
        var rightleft = jQuery(e).find('select[name="rightleft"]')[0];
     
        // Here we'll count the errors, and allso apply an .error class if you want to style the input to alert the user
        if (jQuery(rightleft).length == 1) {
          if (jQuery(rightleft).val() == " ") {
            errors++;
            jQuery(rightleft).addClass('error');
          } else {
            jQuery(rightleft).removeClass('error');
          }
        }
    }
    fcc.events.cart.preprocess.add(custom_validation);
    </script>
    <!-- END FIELDS -->
    
    
    <p>Right/Left</p>
    <select name="rightleft" id="rightleft" size="1">
    <option value=" " selected="selected"></option>
    <option value="right">Right</option>
    <option value="left">Left</option>
    <option value="string only{p-69}">String Only (-$69)</option>
    </select>
    

    http://lostnationarchery.com/index.php/product/view/ams_retriever_pro_reel


    thank you so much!
  • fc_adamfc_adam FoxyCart Team
    @mukesudyk,

    Sorry - I should have been clearer - you'll still need that last part of the custom_validation function, particularly this bit:
    if (errors > 0) {
            alert('Please choose a Widget!');
            return false;
        } else {
            return true;
        }
    
Sign In or Register to comment.