JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<form id="myform">
    <input type="text" name="test" />
    <br/>
    <input type="text" name="test2" />
    <br/>
    <input type="text" name="test3" />
    <br/>
    <input type="text" name="test4" />
    <br/>
    <button type="submit">Submit</button>
</form>
<br/>
<button id="test">TEST #3 without triggering message</button>
<span id="status"></span>

JavaScript

$(document).ready(function() {

    var validator = $('#myform').validate({
        rules: {
            test: {
                required: true
            },
            test2: {
                required: true
            },
            test3: {
                required: true
            },
            test4: {
                required: true
            }
        }
    });

    $('#test').on('click', function() {
        if (validator.check($('[name="test3"]')[0])) {
            $('#status').text('third field is valid');
        } else {
            $('#status').text('third field is required');
        }
    })

});