JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">Add Publisher</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div class="col-lg-12">
                        <form>
                            <div class="form-group col-lg-6">
                                <label class="control-label" for="name">Publisher Name:</label>
                                <div class="input-group">
                                    <input class="form-control name" placeholder="Publisher Name" name="surname" type="text" />
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="control-label" for="phone">Phone:</label>
                                <div class="input-group">
                                    <input class="form-control phone" placeholder="Phone" name="phone" type="text" />
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="control-label" for="website">Website:</label>
                                <div class="input-group">
                                    <input class="form-control website" placeholder="website" name="website" type="text" />
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="control-label" for="contact">Contact:</label>
                                <div class="input-group">
                                    <input class="form-control contact" placeholder="Point of Contact"...

CSS

.has-error {
     border: 1px solid #ccc;
}

JavaScript

$('form').validate({
    rules: {
        surname: {
            minlength: 3,
            maxlength: 35,

        },
        phone: {
            minlength: 9,
            maxlength: 10,
            required: true
        },
        website: {
            required: true,
            url: true
        },
        contact: {
            required: true,
            minlength: 2
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
   
    submitHandler: function (form) {
        var name = $(".name").val();
        var phone = $(".phone").val();
        var website = $(".website").val();
        var contact = $(".contact").val();
        localStorage.setItem('name', name);
        localStorage.setItem('phone', phone);
        localStorage.setItem('website', website);
        localStorage.setItem('contact', contact);
        return false;
    }
});