JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<table class="right">
    <tr>
        <td>
            <label for="email">Email</label>
        </td>
        <td>
            <label for="password">Password</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="email" name="email" type="text"></input>
        </td>
        <td>
            <input id="password" type="password" name="password"></input>
        </td>
        <td>
            <input type="submit" class="submit" value="submit"></input>
        </td>
    </tr>
    <tr class="errorContainer displayNone">
        <td class="displayNone emailError" index="email">asnd,sand,mnsa,mdna,msnd,mands,mansd</td>
        <td class="displayNone passwordError" index="password"></td>
    </tr>
    <tr>
        <td></td>
        <td><a>Forgot your password?</a>

        </td>
    </tr>
</table>

JavaScript

errorPlacement: function (error, element) {
     var parent = element.parents("tr").next("tr");
     parent.removeClass("displayNone");
     $(parent).find('td').removeClass("displayNone");
     var errorContainer = $(parent).find('td[index=' + element.attr('id') + ']');
     errorContainer.removeClass("displayNone");
     error.appendTo(errorContainer);
 }