Menu icon Foundation
Abide-Validation with <table>

I have abide successfully working on several forms on my site, however I am running into a problem with a form that I have inside of a table. I am displaying about 50 records from a database and I want the form to display as a row of the table with a custom submit button.

When I add the 'data-abide' to and set all other fields as required, they always show as an error. When create a test form in one cell () and test abide it works as expected. Any suggestions on how to fix this?

<tr>
    <td>
        <form data-abide>
        works!'
        </form>
    </td>
</tr>

<form data-abide>
    <tr>
        doesn't work'
    </tr>
</form>

<tr>
    <form data-abide>
        <td>
            doesn't work'
        </td>
    </form>
</tr>
            

         

abidetables

I have abide successfully working on several forms on my site, however I am running into a problem with a form that I have inside of a table. I am displaying about 50 records from a database and I want the form to display as a row of the table with a custom submit button.

When I add the 'data-abide' to and set all other fields as required, they always show as an error. When create a test form in one cell () and test abide it works as expected. Any suggestions on how to fix this?

<tr>
    <td>
        <form data-abide>
        works!'
        </form>
    </td>
</tr>

<form data-abide>
    <tr>
        doesn't work'
    </tr>
</form>

<tr>
    <form data-abide>
        <td>
            doesn't work'
        </td>
    </form>
</tr>
            

         
Rafi Benkual over 4 years ago

It's likely the validation is triggering correctly. The issue is that Abide is just JS and the error styles come from Form styles. There are no tables in the form CSS.

You can add table elements into the error CSS to make those display.