JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form id="frmPO" action="" method="get" runat="server">
    <div class="form-group input-sm">
        <div class="row">
            <div class="col-sm-6">
                <label for="txtClientContract">Client Contract</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="txtClientContract" runat="server" required/> <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="btnClientContracts" >
                                ...</button>
                        </span>

                </div>
                </br>
                <div class="row">
                    <div class="form-group col-sm-4">
                        <button id="btnSavePO" type="button" class="btn btn-default">Create Purchase Order</button>
                    </div>
                </div>
            </div>
        </div>
</form>

JavaScript

$("#btnSavePO").click(function () {
      if ($("#frmPO").valid()) {
          alert("valid!");
      } else {
          $(".input-group").find("label.error").detach().insertAfter($(".input-group"));
          alert("not valid!");
      }

      //if (create) {
      //}

  });