JSFiddle - React, Tailwind, and code Playground

by cormip

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" 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({
    onfocusout: function(element) {
        var $el = $(element);
        alert('0');
        if (!$el.is('select') && element.value === '' && element.defaultValue === '' && !$e1.is('.required')) {
          alert('1');            return;
        }
        alert('2');
        $el.valid();
    }
});
});