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>
                    <label for="txtClientContract" generated="true" class="error"></label>
                  </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
          {
            
            alert("not valid!");
          }

        if (create) {




        }

    });