JSFiddle - React, Tailwind, and code Playground
HTML
<form id="message_form" method="post">
<div class="success">Contact form submitted! <strong><br>We will be in touch soon.</strong></div>
<fieldset>
<label class="name"><span class="formlabel"> Name:</span>
<input type="text" name="name" id="name" placeholder="Please provide your full name">
<span class="error">*This is not a valid name.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<label class="phone"><span class="formlabel">Phone:</span>
<input type="text" name="phone" id="phone" placeholder="Example: (555) 555-5555">
<span class="error">*This is not a valid phone number.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<label class="email"><span class="formlabel">Email:</span>
<input type="text" name="email" id="email" placeholder="Please provide your email address" >
<span class="error">*This is not a valid email address.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<span class="formlabel_message">Message:</span>
<label class="message">
<textarea name="message" id="message" placeholder="Please enter your message here" style="margin-top:0;"></textarea>
<span class="error">*The message is too short.</span>
<span class="empty">*This field is required.</span>
<span class="clear"></span>
</label>
<div...
JavaScript
$(function(){
$('#message_form #submit').attr('disabled', 'disabled');
$('#message_form input,textarea').on('keyup', function(){
if($('#name').val() && $('#phone').val() && $('#email').val() && $('#message').val()){
$('#message_form #submit').removeAttr("disabled");
}
else{
$('#message_form #submit').attr('disabled', 'disabled');
}
});
});