JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.0/jquery.validate.min.js"></script>
<form id="search" name="search" method="post" action="">
    <label for="a">Text A</label>
    <input id="a" type="text" class="search-person" name="person1" />
    <label for="b">Text B</label>
    <input id="b" type="text" class="search-person" name="person2" />
    <label for="c">Text C</label>
    <input id="c" type="text" class="search-person" name="person3" />
    <label for="d">Text D</label>
    <input id="d" type="text" class="search-hcn" name="hcn" />
    <p>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </p>
</form>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .required {
    border: 1px solid red !important;
}

JavaScript

$('.search-person').focus(function () {
    $('.search-hcn').val(' ').removeClass("required");
    $('.search-person').addClass("required");
});

$('.search-hcn').focus(function () {
    
    $('.search-person').val(' ').removeClass("required");
    $('.search-hcn').addClass("required");
});
$('#search').validate();