jQuery custom rule always returning true

Question

I am using jQuery with jQuery steps and jQuery validation.

I have written some custom rules for a section of code, however, these rules are not working correctly.

Here is my html code:

<h2>Second Step</h2>
<section>
    <form id="SecondStep" >
        <section class="expose">
            <div class="label-field clearfix">
                <fieldset data-role="controlgroup">
                    <legend>Textbox</legend>
                    <input type="text" id="textbox" name="textbox" />
                </fieldset>
            </div>
            <div class="label-field clearfix">
                <fieldset data-role="controlgroup">
                    <legend>Password</legend>
                    <input type="password" id="password" name="password" />
                </fieldset>
            </div>
        </section>
    </form>
</section>

Here are my custom rules:

$("#SecondStep").validate({
    rules: {
        textbox: "required",
        password: {
            required: true,
            minlength: 5
        }
    },
    messages: {
        textbox: "Please enter information into the textbox",
        password: {
            required: "Please enter a password",
            minlength: "Your password must consist of at least 5 characters"
        }                           
    }
});

Here is my code that am calling from the onClick of a button to test my custom rules:

function validateAllElements()
{
     var isValid = $("#SecondStep").valid(); 
     alert(isValid);
}

When I call the validateAllElements function, even if I have no values at all in the textbox and password form elements, the .valid method returns true.

May I have some help with this code?

Thanks in advance

score 0 · Accepted Answer · answered Jan 30 '14 at 22:33

After a few test with JSFiddle you code seems to work if wrapped into the $(document).ready(function() {}).

$(document).ready(function() {
    $("#SecondStep").validate({
    rules: {
        textbox: "required",
        password: {
            required: true,
            minlength: 5
        }
    },
    messages: {
        textbox: "Please enter information into the textbox",
        password: {
            required: "Please enter a password",
            minlength: "Your password must consist of at least 5 characters"
        }                           
    }
    });
    $('#test').click(function () {
         var isValid = $("#SecondStep").valid(); 
         alert(isValid);
    });
});

jQuery custom rule always returning true

1 Answers1