JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<form id="my_form_email">
        <input type="text" name="f[name]" autocomplete="on" placeholder="Имя" id="name" required pattern="[A-Za-zА-Яа-яЁё] \s [A-Za-zА-Яа-яЁё]">
        <input type="email" name="f[email]" autocomplete="on" placeholder="Почта" id="email" required>
        <input type="tel" name="f[phone]" autocomplete="on" placeholder="Телефон" id="phone" required>
        <textarea name="f[comment]" placeholder="Сообщение" id="comment" required></textarea>

        <div class="permisson">
            <input type="checkbox" id="check_agree" required>
            <label for="check_agree" class="check_agree_label">Соглашаюсь на сбор и обработку персональных данных</label>
            <input type="submit" class="submit_button" id="my_form_email_button" value="Отправить">
        </div>

        <div id="my_message_email"></div>
    </form>

JavaScript

$("#my_form_email_button").prop('disabled', true);

var toValidate = $('#name, #email, #phone, #comment, #check_agree'),
    toInputs = $('#name, #email, #phone, #comment'),
    toTrim = toInputs.val(),
    toCheckbox = $('#check_agree'),
    whitespace = ' ',
    pattern = whitespace.replace(/^\s+|\s+$/g, '');
toValidate.change(function() {
function check_inputs(input)
{
    var value = input.value,
        newValue = value.replace(/^[\s.`":'$@~;]*|[\s.`":'$@~;]*$/g, '');
    if (newValue != value) input.value = newValue;
}
    var trimed = toTrim.trim();
    if ($(this).val().length > 0 && $('#check_agree').prop('checked') == true) {
        $(this).data('valid', true);
        console.log ('1');
        $("#my_form_email_button").prop('disabled', false);
    } else {
        jQuery(this).data('valid', false);
        console.log ('0 and ' + toTrim + '');
        $("#my_form_email_button").prop('disabled', true);
    }
});