JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/2.3.0-j5/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/2.3.0-j5/jasny-bootstrap.min.css">
<form name="frmUpload" id="frmUpload" enctype="multipart/form-data" method="post" action="" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Document</label>
        <div class="controls">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="input-append">
                    <div class="uneditable-input highlight span3">	<i class="icon-file fileupload-exists"></i>
	<span class="fileupload-preview"></span>

                    </div>	<span class="btn btn-file">
															<span class="fileupload-new">Select Document</span>
	<span class="fileupload-exists">Change</span>

                    <input type="file" name="uploadFile1" id="uploadFile1" onChange="$('#renameUploadDoc1').attr('value', $('#uploadFile1').attr('value').split('\\').pop()).focus();">
                    </span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>

                </div>
            </div>	<span class="help-inline">(45 Characters Maximum) | Disallowed Characters <a href="#" rel="tooltip" data-placement="top" title="Square brackets [ ], colons :, single quotes, double quotes, pound signs #, ampersands (&amp;), question marks ?, slashes, asterix *, carets &circ;, and greater than-lesser than symbols &lt; &gt; are not permitted in document or directory names. Directory names cannot end in a period."><i class="icon...

JavaScript

$.validator.addMethod(
    "regexdoc",

function (value, element) {
    return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value));
},
    "Document Names Cannot Contain Characters /, :, ?, \\, *, |, [, ], <, ', ^, #, &, or >.");

$("#frmUpload").validate({
    debug: true,
    errorPlacement: function (error, element) {
        element.closest('.control-group').find('.help-block').html(error.text());
    },
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error').addClass('success');
    },
    success: function (label) {
        $(label).closest('form').find('.valid').removeClass("invalid");
    },
    rules: {
        uploadFile1: {
            required: true,
            minlength: 4,
            regexdoc: true
        },
        renameUploadDoc1: {
            required: true,
            minlength: 4,
            maxlength: 45,
            regexdoc: true
        }
    }
});