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="brief-test/" 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" style="display: block;">
<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 error" 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="" class="valid"><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>Заинтересовали какие-то из наших услуг? Опишите, какие задачи вам предстоит решить, а мы свяжемся с вами и расскажем, как лучше это сделать.</p>
<p style="margin-top: 70px;"><span>Размер файла не должен превышать 128 Мб</span></p>
<p><span>Форматы: .doc, .docx,...
JavaScript
$.validator.setDefaults({
invalidHandler: function(){
//console.log("not submitted!");
},
submitHandler: function(){
$( "#brief_form_new" ).submit();
//console.log("submitted!");
}
});
$.validator.addMethod("checkFileSize",function(value) {
// check filesize
return false;
}, "wrong filesize");
$().ready(function() {
$("#brief_form_new_test").validate({
rules: {
attachment: {
required: false,
checkFileSize: true,
extension: "doc,docx,txt,pdf,jpg,jpeg,png"
},
message_new: "required",
name_new: "required",
email_new: {
required: true,
email: true
},
phone_new: "required"
},
messages: {
attachment: "wrong format",
message_new: "enter message",
name_new: "enter name",
email_new: "enter email",
phone_new: "enter phone"
}
});
});