Search jQuery

jQuery Forum

Translate function into a new validation rule

in Using jQuery • 10 years ago

I wrote a function to validate a section of a form. The intention is, when the form submit button is clicked, ensure there are at least 3 rows in the table, if the radio button with a value of true is clicked.

Here is the basic HTML structure:

<form id="MyForm" action="/" method="post">
<div class="Question">
<div class="RadioBtns">
<input type="radio" id="Radio_Yes" name="Radio1" value="true" />Yes
<input type="radio" id="Radio_No" name="Radio1" value="false" />No
</div>
<div class="TextFields">
<input type="text" id="field1" />
<input type="text" id="field2" />
<input type="text" id="field3" />
</div>
<table id="Table1" class="Data-Table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td colspan=2>No Data Entered</td>
</tr>
</table>
</div>
<p>
<input type="submit" value="Add to Database" />
</p>
</form>

Here is the function:

$(document).ready(function () {
$("#SendBtn").click(function () {
var rows = $("#Table1 tr").length;
if ($("#Radio_Yes:checked") && (rows < 3))
{
$(this).closest("div.TextFields").css("backgroundcolor: #ff0000;");
}
});
});

It doesn't work and not sure why, but not really a big deal because I need to translate this into a new validation rule anyway. I am looking at doing something like:

$("#TxtFld").rules("add", {
required: "#Radio_Yes:checked"
});

but that also isn't working, so some help would be great. The other issue ios I actually have 7 ".Question" classes, so I am hoping to have one rule that will apply to all questions.

Here is the basic html structure: