JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<form id="validateme1" name="validateme1">
    <a href="#">lol</a>
    <label>naam</label><span><input class="naam required" value="" name="form1.0"/></span>
    <br>
    <label>achternaam</label><span><input class="achternaam required" value="" name="form1.1"/></span> 
    <br/>
    <label>tussenvoegsel</label><span><input class="tussenvoegsel required" value="" name="form1.2" /></span>
    <br/>
    <input class="submit" type="submit" value="submit validateme1"/>   
</form>

<hr/>
<form id="validateme2" name="validateme2">
    <label>naam</label><span><input class="naam required" value="" name="form2.0"/></span>
    <br>
    <label>achternaam</label><span><input class="achternaam required" value="" name="form2.1" /></span>
    <br/>
    <label>tussenvoegsel</label><span><input class="tussenvoegsel required" value="" name="form2.2" /></span>
    <br/>
    <input class="submit" type="submit" value="submit validateme2"/>   
</form>

CSS

#validateme1{border:1px solid red; padding:5px;}
#validateme2{border:1px solid gold; padding:5px;}
label{width:100px; display:inline-block;}

.error {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 2px #CCCCCC;
    font-size: 12px;
    max-width: 200px;
    margin:5px;
    min-height: 25px;
    padding:5px;
    background-color: #FFCFD0;
    border: 1px solid #CF676B;
    color: #BF0008;
}
.error:hover {
    background-color: #FFEFF0;
}

JavaScript

$("form").submit(function() {
    var closestForm = $(this).closest('form').attr('id');
    console.log(closestForm,'closestForm');
    $("#"+closestForm+" input.naam").each(function() {
        $(this).rules("add", {
            required: {
                depends: function(element) {
                //console.log(closestForm,'closestForm1');
                    return $("#"+closestForm+" .achternaam").val() !== ""
                }
            },
            messages: {
                required: "Yo eindbaas vul je naam in!"
            }
        });
    });
    $("#"+closestForm+" input.achternaam").each(function() {
        $(this).rules("add", {
            required: {
                depends: function(element) {
                    return $("#"+closestForm+" .naam").val() !== ""
                    //console.log(closestForm,'closestForm2');
                        }
            },
            messages: {
                required: "Yo eindbaas vul je achternaam in!"
            }
        });
    });
    $("input.tussenvoegsel").each(function() {
        $(this).rules("add", {
            required: true,
            messages: {
                required: "Yo eindbaas vul je tussenvoegsel in!"
            }
        });
    });
});

var options = {
    ignore: ':hidden',
    wrapper: "div",
    errorElement: "div",
    errorClass: "message",
    errorPlacement: function(error, element) {
        error.insertAfter(element.parents("span"));
        error.addClass('error');
    },
    rules: {
        shipPostalCode: {
            postalCode: true
        }

    },
    messages: {

    }
};

$('#validateme1').validate(options);
$('#validateme2').validate(options);