JSFiddle - React, Tailwind, and code Playground

by rbmako69

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<form id="form1" mrthod="get" action="#">
    <div date-role="fieldcontain" class="ui-hide-label">
        <label for="best_contact_method">Best Contact Method</label>
        <select data-theme="a" id="best_contact_method" name="best_contact_method" class="required" data-native-menu="false">
            <option>Best Contact Method</option>
            <option value="email">Email</option>
            <option value="daytime_phone">Daytime Phone</option>
            <option value="evening_phone">Evening Phone</option>
        </select>
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="daytime_phone" id="daytime_phone_label">Daytime Phone</label>
        <input type="text" id="daytime_phone" name="daytime_phone" placeholder="Daytime Phone" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="evening_phone" id="evening_phone_label">Evening Phone</label>
        <input type="text" id="evening_phone" name="evening_phone" placeholder="Evening Phone" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="email" id="email_label">Email</label>
        <input type="text" id="email" name="email" placeholder="Email" />
    </div>
    <button type="submit" data-theme="a" name="submit" id="submit" value="validate">Validate</button>
</form>

JavaScript

$(document).ready(function () {
    $("#best_contact_method").change(function () {
        var item = $("select option:selected").val();
        switch (item) {
            case "email":
                $("#email").attr("class", "required email");
                $("#daytime_phone, #evening_phone").attr("class", "");
                break;
            case "daytime_phone":
                $("#daytime_phone").attr("class", "required phoneUS");
                $("#email, #evening_phone").attr("class", "");
                break;
            case "evening_phone":
                $("#evening_phone").attr("class", "required phoneUS");
                $("#email, #daytime_phone").attr("class", "");
                break;
        }
    });
    $("#form1").validate();
});