jQuery Validation Plugin - Challenge you to figure this out (help?)

Question

Simple enough, why the heck isn't this working...? jQuery 1.6.2 is included in the head as well, above this. It's not triggering validation, now it just goes straight through and says "Submitted" without even validating the fields.

The validation in the head:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#newcontract").validate({
    rules: {
        rec_name: {
            required: true
        }
    },
    messages: {
        rec_name: {
            required: 'You need to enter a contract receiver.'
        }
    },
    submitHandler: function() { 
    alert("Submitted!"); }
});
});
</script>

Form is named newcontract, so what am I missing:

<form name="newcontract" id="newcontract" method="post">
    <input type="text" name="rec_name" id="rec_name" size="42" class="required"/>
    <tr><td class="submit" colspan="3"><input type="submit" name="savelisting" id="savelisting" value="Save New Contract" /></td></tr>
</form>

What's going on? It won't validate this text field. Help!!

UPDATE: The code above works as expected. The issue lied within the fact that I removed a table that was wrapping my form, and the validation plugin was skipping the form. As soon as I moved the form outside the table in my HTML, it worked fine.

Nope, there's some 404 errors on images but those aren't relevant to this. — Brenden Clerget, May 02 '12 at 23:43
Unless you have a `required` defined somewhere `rec_name: required` should be `rec_name: 'required'` — Musa, May 02 '12 at 23:48
Still doesn't change anything. Just tried. Still skips right through — Brenden Clerget, May 02 '12 at 23:51
[Pasted in JSFiddle](http://jsfiddle.net/8bEVb/) it seems to work fine. Notice any differences between it and your code? — Andrew Whitaker, May 03 '12 at 00:02
Nope, there has to be a conflicting script somewhere... right? It works in jsfiddle for me too. — Brenden Clerget, May 03 '12 at 00:15
Are you including jQuery again after jQuery validate perhaps? Look closely at the order of the scripts in `head` — Andrew Whitaker, May 03 '12 at 00:22
1. jquery162 2. jquery validation plugin 3. methods js file 4. script above 5. form It's annoying me so much, what could it possibly be... — Brenden Clerget, May 03 '12 at 00:24
Is jQuery being loaded correctly? If you use a CDN does it fix things? — Andrew Whitaker, May 03 '12 at 00:36
Is there any way having the form within a table is going to ruin this and break it? Seems when it's outside the table it works. — Brenden Clerget, May 03 '12 at 00:44
It would take a really long time to remove sensitive stuff from it, or else I would. It's got something to do with the table though, as soon as I take the form outside and put it outside the table, it works, and if it's wrapped it doesn't. — Brenden Clerget, May 03 '12 at 00:46
I'm not really sure what else we're supposed to do here. The code you posted above is working fine as demonstrated in jsFiddle. As far as the `table`, your HTML looks pretty strange to me. You have components of a `table`, the `tr` and `td` inside the `form`. Why not put the `form` totally inside one cell, put the entire `table` inside the `form`, or eliminate the `table` altogether? [Just make sure it's valid HTML](http://stackoverflow.com/a/5967613/594235). — Sparky, May 03 '12 at 03:21
Figured it out, it doesn't like it at all if the table wraps the entire form, but as soon as the form wraps the table, all is well! Weird WEIRD bug, not sure if it's worthy to report, but it does NOT work with the table wrapped around it. — Brenden Clerget, May 03 '12 at 04:38
Not sure why you think it's weird that [invalid HTML](http://stackoverflow.com/a/5967613/594235) causes it to fail. In any case, please either accept Jirka's answer below or write your own answer and accept that. — Sparky, May 03 '12 at 13:59
His HTML did NOT fix the problem in my case, I will update the question and write an answer. — Brenden Clerget, May 03 '12 at 18:18

score 3 · Accepted Answer · answered May 03 '12 at 00:04

3

Bad using of tr tag.

<form name="newcontract" id="newcontract" method="post">
<input type="text" name="rec_name" id="rec_name" size="42" class="required"/>
<p class="submit"><input type="submit" name="savelisting" id="savelisting" value="Save New Contract" /></p>
</form>

first step, make proper html form.

answered May 03 '12 at 00:04

Jirka Kopřiva

2,939
25
28

Agreed that the markup is bad, but I don't think it's the problem. – Andrew Whitaker May 03 '12 at 00:05
I ripped out a bunch of other HTML, to show you what you needed. The HTML isn't the problem, it's quite clean and nice in the complete file (far too large to paste in) – Brenden Clerget May 03 '12 at 00:14
It works for me after change. Did you try other jquery version? – Jirka Kopřiva May 03 '12 at 00:18
There was not bad use of the TR tag, that TR tag is within a table of a ton of other elements. I only showed what I needed to, the HTML is fine, and works as expected with the CSS file. – Brenden Clerget May 03 '12 at 18:19
2

@BrendenClerget, The **only** valid location for a `form` inside of a `table` is if it's also completely enclosed inside a _single_ `td` table cell. Your HTML snippet indicates no such thing. In fact, your snippet implies that your `form` is a _direct descendant_ of `table` because it's enclosing a row... that is [invalid HTML](http://stackoverflow.com/a/5967613/594235). [READ THIS](http://stackoverflow.com/a/5967613/594235) if you're really interested in learning more about how your HTML was not valid. – Sparky May 03 '12 at 22:46

jQuery Validation Plugin - Challenge you to figure this out (help?)

1 Answers1