JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
    <form enctype="multipart/form-data" name="brief_form_new" id="brief_form_new_test" action="[[~[[*id]]]]" method="post" novalidate="novalidate" data-bb="_new">
        <div>
            <input type="hidden" name="order_new" id="order" value="" />

            <input type="hidden" name="type_new" id="type" value="" />
        </div>

        <div class="request-form1 selector_for_request_form_working" hashtag="#apps">
            <div class="sector_brif" style="margin-bottom:20px;">
                <div class="textarea-box" style="width: 450px;margin-bottom: 30px;">
                    <textarea   type="text" 
                                name="message_new" 
                                rows="5" 
                                cols="50" 
                                class="main_field"
                                placeholder="Я хочу... *" 
                                style="width: 426px;" 
                                title="Заполните поле"></textarea>
        
                    <div class="file-add" style="width: 100%;height: 0;padding-bottom: 44px;background-size: cover;">
                        <input type="file" size="1" name="attachment" value="" id="fileUploadField"><br />
                        <input type="hidden" name="MAX_FILE_SIZE" value="131000" />
                          
                         <!--<div class="right-box">
                            Размер прикрепленного файла не должен превышать 128 Мб
                        </div>-->
                    </div>

                    <div class="filename" style="color: #FFFAF0; margin-top: 70px;"></div>
                </div>

                <div class="right-box" style="width: 220px;">
                    <p>Заинтересовали какие-то из наших услуг? Опишите, какие задачи вам предстоит...

CSS

#brief_form_new_test{

    }

        #brief_form_new_test label.error{
            color: #ea3333;
            font: italic 14px 'PT Sans', arial, sans-serif;
            position: static;
        }

        #brief_form_new_test .filename{
            text-align: right;
        }

        #brief_form_new_test .file-add{
            position: relative;
            overflow: visible;
        }

            #brief_form_new_test .file-add label.error{
                position: absolute;
                top: 46px;
                left: 0;
            }

            #brief_form_new_test .file-add input {
                font-size: 16px !important;

                width: 450px;
                height: 45px;
                margin-left: 0;
            }

        #brief_form_new_test textarea.error,
        #brief_form_new_test input.error{
            border: 2px solid red;
        }

        #brief_form_new_test .fio_cell{
            float: left;
            position: relative;
            width: 384px;
            margin-bottom: 20px;
        }  

            #brief_form_new_test .fio_cell input{
                margin-bottom: 0;
            }


        #brief_form_new_test  .textarea-box > div,
        #brief_form_new_test  .fio-box > div{
            position: relative;
        }

            #brief_form_new_test  .textarea-box > div label.error,
            #brief_form_new_test  .fio-box > div label.error{
                position: absolute;
                top: 54px;
                left: 0;
            }

JavaScript

$.validator.setDefaults({
        invalidHandler: function(){ 
            var fileInput = document.getElementById("fileUploadField");

            if($('#brief_form_new_test .file-add input.error').length >= 1){
                $('.file-add').css({
                    'background': 'url("../img/attache.png") 0 -88px'
                });
            }else{ 
                $('.file-add').css({
                    'background': 'url("../img/attache.png") 0 0'
                });
            };

            //console.log("not submitted!");
        },
        submitHandler: function(){
            console.log('submitHandler!');
            $( "#brief_form_new_test" ).submit();
        }
    });

    $.validator.addMethod("checkFileSize",function(value, element) {
        // check filesize
        var fileInput = document.getElementById("fileUploadField"),
            fileSize;

        if(fileInput.files[0]){
            if(fileInput.files[0].size > 134217728){
                return false;
            }else{
                return true;
            }
        }else{
            $('.file-add label.error').empty();
            return true
        }
    }, "Размер файла превышен");    

    $().ready(function(){
        $("#brief_form_new_test").validate({
            rules: {
                attachment: {
                    required: false,
                    checkFileSize: true,
                    extension: "doc,docx,txt,pdf,jpg,jpeg,png"
                },
                message_new: {
                    required: true,
                    minlength: 10
                },
                name_new: "required",
                email_new: {
                    required: true,
                    email: true
                },
                phone_new: {
                    "required": true,
                    "pattern": /[-0-9 -()+]+$/
                }
            },
            messages: {
                attachment: {
                    required: 'File...