JSFiddle - React, Tailwind, and code Playground

by John-Philip Johansson

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<section class="article-configuration box">
    <form>
        <fieldset class="article-selection">
            <section class="step">
                <label>Choose size:</label>
                <select id="choose-size" autofocus required>
                    <option value=""></option>
                    <option value="size1">Like a cat</option>
                    <option value="size2">Like a mouse</option>
                    <option value="size3">Like a whale</option>
                </select>
            </section>
        </fieldset>
    </form>
</section>

JavaScript

$('.article-configuration form').validate({
    rules: {
        'choose-size': {
            required: {
                notNone: true
                }
            }
        }
    });

    $('#choose-size').change(function () {
        console.log($('.article-configuration form').valid());

        if ($stepSelects.find('option').filter(':selected').length === 3)
            $('.quantity-selection').fadeIn('fast');
    });