Validation validate returns true with empty required text area on the form

Question

I have a form I want to validate a textarea on:

<form action="" id="dialog">
        <textarea name="message-text" class="message-text" rows="5" cols="30" required="true" style="margin-top: 35px;margin-bottom: 25px"></textarea>
        <span style="color: red; display: none" class="error-message">An error occured while sending the message.</span>
        <a href="" class="button send-message">Send</a>
        <a href="" class="button cancel-sending">Cancel</a>
</form>

When I call

$('#dialog').valid()

with an empty textarea it returns true while I expect it to return false. Internally when it collects rules for the form the value of element.attr('required') ends up being 'required' for some reason when the value of the attribute is 'true' and the required method returns 'dependency-mismatch'. I'm not sure what these things mean but probably they are connected with valid() returning true and not false as I expect it.

What am I doing wrong here?

Edit: Sorry for my blunder in the question, I meant .valid() not .validate()

I can see you're confused because `.validate()` does not behave as you expected. However, you also have not explained what you're really trying to accomplish. — Sparky, Aug 30 '13 at 15:11
Sorry, I meant, I'm calling .valid(), not .validate(), this makes a big difference of course — axk, Aug 30 '13 at 16:18
I have one text area that is required and I'm trying to check if the form is valid i.e. if the text are is not empty. I'm not doing this the standard way where the plugin reacts to the form being submitted because the form is not submitted, in fact I only added the form tag to be able to user jquery validation — axk, Aug 30 '13 at 16:24
Your code is working fine for me: http://jsfiddle.net/JSXxx/1/ — Sparky, Aug 30 '13 at 17:12
You can also attach `.valid()` to the element itself. Still working fine: http://jsfiddle.net/JSXxx/2/ — Sparky, Aug 30 '13 at 17:14

score 1 · Answer 1 · edited May 23 '17 at 12:29

Quote OP:

When I call $('#dialog').validate() with an empty textarea it returns true while I expect it to return false. Internally when it collects rules for the form the value of element.attr('required') ends up being 'required' for some reason when the value of the attribute is 'true' and the required method returns 'dependency-mismatch'. I'm not sure what these things mean but probably they are connected with validate() returning true and not false as I expect it.

What am I doing wrong here?

I have no idea what you're trying to do here with all that. The .validate() method is typically only used for one thing... intializing the plugin on your form, and you would only call it once on DOM ready.

$(document).ready(function() {

    // initialize the plugin with your options
    $('#dialog').validate({
        // rules, options, and callback functions
    });

});

DEMO: http://jsfiddle.net/WHheY/

If you're looking for a boolean to tell you status of the form, you'll want to subsequently call the .valid() method... that's what it's for. See: https://stackoverflow.com/a/18221081/594235

if ( $('#dialog').valid() ) {
    // something to do when the form is valid
};

It also triggers validation...

$('#dialog').valid();  // trigger a test

DEMO: http://jsfiddle.net/WHheY/2/

Otherwise, you'd normally just use the submitHandler callback function which is only fired on a valid form when the submit event occurs.

$(document).ready(function() {

    $('#dialog').validate({
        // rules, options, and callback functions,
        submitHandler: function(form) {
            // your ajax
            return false
        }
    });

});

DEMO: http://jsfiddle.net/WHheY/4/

Sorry, I meant I'm calling .valid(), not .validate(), this makes a big difference of course — axk, Aug 30 '13 at 16:20
@axk, I don't see the problem you describe. See: http://jsfiddle.net/JSXxx/1/ and http://jsfiddle.net/JSXxx/2/ — Sparky, Aug 30 '13 at 17:17

Validation validate returns true with empty required text area on the form

1 Answers1