Validating Add-To-Cart Form Inputs

Assuming a basic HTML add-to-cart form like this, where you want to ensure that the select element isn't empty before you all the product to be added to the cart:

<form action="https://buckcard.foxycart.com/cart" class="foxycart" name="form6" id="form6" method="post">
    <input type="hidden" name="name" value="Fancy T-Shirt" />
    <input type="hidden" name="price" value="19.95" />
 
    <strong>Size:</strong>
    <select name="shirt_size" id="shirt_size">
        <option value="small">small</option>
        <option value="medium">medium</option>
        <option value="large">large</option>
    </select>
 
    <input type="submit" name="submit" value="Buy Now" />
</form>

You'd use some javascript like this (inside a <script> tag), changing the shirt_size as needed:

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 shirt_size = jQuery(e).find('select[name="shirt_size"]')[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(shirt_size).val()) {
        errors++;
        jQuery(shirt_size).addClass('error');
    }else{
        jQuery(shirt_size).removeClass('error');
    }
 
    if (errors > 0) {
        alert('Please choose a Widget!');
        return false;
    } else {
        return true;
    }
}
fcc.events.cart.preprocess.add(custom_validation);