JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>

<form id="myform">
    <input type="radio" name="radio" value="value1" />value1
    <input type="radio" name="radio" value="value2" />value2
    <input type="radio" name="radio" value="value3" />value3
    <br />
    <br />
    <input type="text" name="name" />
    <br />
    <br />
    <input type="submit" />
</form>

JavaScript

//Select the value3, then select another button while the focus is on the name input
//The error will appear

$(document).ready(function () {

    $("input[name='radio']").change(function () {
        var value = $(this).val();
        if (value == "value3") $("input[name='name']").focus();
        else $("input[name='name']").valid();
    });

    $("#myform").validate({
        rules: {
            name: {
                required: {
                    depends: function () {
                        return $("input[name='radio']:checked").val();
                    }
                }
            }
        },
        messages: {
            name: {
                required: "You must enter name"
            }
        },
        onfocusout: function (element,event) {
            event.preventDefault();
            this.element(element);
        },
        submitHandler: function (form) {
            alert('success');
            return false;
        }
    });

});