2

I'm wondering why there is a difference in jQuery Validate plugin's default handling of <input> vs. <textarea>. In the demo below, notice that the required class makes the <input> required but not the <textarea>.

<form>
    <input class='required' /> 
    <textarea class='required' ></textarea>
    <button value='submit'>submit</button>
</form>

$('form').validate();

http://jsfiddle.net/trpeters1/BrCzA/

Sparky
  • 98,165
  • 25
  • 199
  • 285
tim peterson
  • 23,653
  • 59
  • 177
  • 299
  • 1
    This is what happens when each field element does not have a `name` attribute. – Sparky Aug 05 '13 at 14:13
  • Like the others say, you need a name=".." attribute for it to work. Though since you are only applying a class="required", i would say this is maybe a bug since the "input" does not have a name attribute either but "does" work. Then again to actually be able to post content back to your server, you will eventually need to add the missing attributes to both the input/textarea anyways – Robert Hoffmann Aug 05 '13 at 14:23
  • 1
    @Robert, it's **not** a bug when the documentation states, [_"The name attribute is 'required' for input elements, the validation plugin doesn't work without it."_](http://jqueryvalidation.org/reference). As stated in my answer, it's not an issue of `input` vs. `textarea`. It's an issue where only the very first element is validated and all others are ignored: http://jsfiddle.net/ZAaPu/2/ – Sparky Aug 05 '13 at 14:27

3 Answers3

7

It has absolutely nothing to do with input vs.textarea.

See: http://jsfiddle.net/ZAaPu/2/

It's failing because each input must have a unique name attribute in order for this plugin to work properly. See the "Markup Recommendations" section of the "General Guidelines". Otherwise, only the very first element is validated and all others are ignored.

<form>
    <input name="thename" class='required' />
    <textarea name="another" class='required'></textarea>
    <button value='submit'>submit</button>
</form>

Working DEMO: http://jsfiddle.net/ZAaPu/

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • -@Sparky awesome, thanks. Your first fiddle actually gets at my real question which is that the error message only goes away when you `keyup` the ` – tim peterson Aug 05 '13 at 15:20
  • @timpeterson, the first fiddle only demonstrates that the problem is there regardless of the kind of input field. Don't trust it for anything else since the `name` attributes are still missing. – Sparky Aug 05 '13 at 17:43
  • I'm having this keyup error hiding problem in my own code, I was happy to see it can be reproduced on your more stripped down demo, any thoughts? – tim peterson Aug 05 '13 at 17:50
  • @timpeterson, but my stripped down demo is missing the `name` attributes and the code does not function properly without. It really sounds like you need to post a new question including the relevant code to reproduce it. – Sparky Aug 05 '13 at 18:20
  • http://jsfiddle.net/ZAaPu/ shows the behavior. http://jsfiddle.net/ZAaPu/2 does **not**. The behavior is that `keyup` of the textarea but not input hides the error message after submit. – tim peterson Aug 05 '13 at 19:39
  • 1
    @timpeterson, Use the latest version of the plugin. See: http://jsfiddle.net/ZAaPu/3/ – Sparky Aug 05 '13 at 20:18
  • 1
    Had the same problem as the question but your solution actually turned out to be the root cause as well. Thanks! – xiankai Feb 07 '14 at 08:30
-3

I think it should work with required attribute. Check this demo. Correct me if I am wrong!

Deepak Biswal
  • 4,280
  • 2
  • 20
  • 37
-4

add name attribut to textarea

<form>
    <input class='required' /> 
    <textarea name='bla-bla' class='required'></textarea>
    <button value='submit'>submit</button>
</form>

$('form').validate();
Yu Tem
  • 1
  • _Every_ single field element **must** have a `name` attribute. See: http://jqueryvalidation.org/reference – Sparky Aug 05 '13 at 14:22