JSFiddle - React, Tailwind, and code Playground

by Phil Glau

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form id="item" name="item" method="post" action="sdfs.php">
    <fieldset>
         <h3>Type</h3> 
        <label for="property_type">offer</label>
        <div class="input">
            <select id="property_type" name="property_type">
                <option selected="selected" value="">Select your offer</option>
                <option value="rent">rent</option>
                <option value="sale">sale</option>
            </select>
        </div>
    </fieldset>
    <fieldset class="rent clearfix hide">
        <label for="requiered by rent">show + requiered by rent</label>
        <select id="rentflat" name="rentflat">
            <option selected="selected" value="">Select</option>
            <option value="1">condition 1</option>
            <option value="2">condition 2</option>
        </select>
    </fieldset>
    <fieldset class="sale clearfix hide">
        <label for="requiered by sale">show requiered by sale</label>
        <select id="saleflat" name="saleflat">
            <option selected="selected" value="">Select</option>
            <option value="1">condition 1</option>
            <option value="2">condition 2</option>
        </select>
    </fieldset>
    <button type="submit" class="btn">inserieren</button>
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

a {
    display: block;
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function () {

    $('#item').validate({
        rules: {
            property_type: {
                required: true
            },
            rentflat: {
                required: {
                    depends: function () {
                        return $('#item select[name="property_type"]').val() === 'rent';

                    }
                }
            },
            saleflat: {
                required: {
                    depends: function () {
                        return $('#item select[name="property_type"]').val() === 'sale';
                    }
                }
            }
        },
        messages: {
            property_type: "offer is required!",
            rentflat: "rentflat is required!",
            saleflat: "saleflat is required!"
        }
    });

});