JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<form id="testform" name="testform" method='post' action=''>
    <label for="total">Total:</label>
    <input name="total" value="200" class="required digits" /><br />
    <label for="name">Name:</label>
    <input name="name" value="Jack" class="required" />
    <input type="submit" value="submit" />
</form>
<p>1. Delete value from Total and switch focus to Name. "Required" validation does NOT get triggered.</p>
<p>2. Enter non-numeric text in Total, switch focus. Go back and delete value in Total and switch focus. "Required" validation DOES get triggered?!?</p>

CSS

.error {color:#a00; background-color:#fcc; border:1px solid red;}

JavaScript

$(document).ready(function(){
    //$("#testform").validate();
    $('#testform').validate({
    onfocusout: function(element) {
        var $el = $(element);
        if (!$el.is('select') && element.value === '' && element.defaultValue === '') {
            // for untouched text fields, don't validate on blur
            return;
        }
        $el.valid();
    }
});
});