jquery validation plugin: validating hidden input, skips required input text

Question

I'm trying to validate a form, that has both hidden and not hidden input. I added in the form validation settings the line ignore: "" to validate the hidden input, but doing so, it doesn't validate required text input that is before it, but only when put AFTER it. Another thing that happens, is that the validation of firstname works on blur after the first submit (but still it doesn't block the submit itself)....

Here is my code, and a link to js fiddle DEMO:

JS:

    var countries = [{label:"Vanuatu", code:"VU"},
        {label:"Ecuador", code:"EC"}];    
    $().ready(function() {
$('#country').autocomplete({
    source : function(request, response) {
        var matcher = new RegExp('^'+$.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(countries, function(element, index) {
            return matcher.test(element.label);
        }));
    },
    delay : 0,
    change : function(event, ui) {
        $('#countryCode').val(ui.item ? ui.item.code : '');
    }
});
$("#signupForm").validate({
    ignore: "",
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        country: {
            required: true
        },
        countryCode: {
            required: function(element){
                return $("#signupForm").validate().element( "#country" );
            }
        },
        email: {
            required: true,
            email: true
        }
    },  
    messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        country: "Please select a country",
        countryCode: "Please select a valid country",
        email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
        alert("fine!");
    }
});

});
HTML form:

    <form id="signupForm" method="post" name="" action="">
<p>
        <label for="firstname"></label>
        <input class="inputText" type="text" id="firstname" name="firstname" placeholder="First Name">
    </p>
            <p>
        <label for="country"></label>
        <input class="inputText" type="text" id="country" name="country" placeholder="Country"/>

        <input type="hidden" name="countryCode" id="countryCode" />
    </p>
                <p>
        <label for="lastname"></label>
        <input class="inputText" type="text" id="lastname" name="lastname" placeholder="Last Name">
                    </p>
                    <p>
        <label for="email"></label>
        <input class="inputText" type="text" id="email" name="email" placeholder="Email">
                        </p>
                        <p>
        <input class="submit" type="submit" id="signupButton" value="SUBMIT" />   
                        </p>
    </form>

what is the logic for `countryCode` validation? Is it required only if `country` is specified? — Arun P Johny, Feb 23 '13 at 15:46
yes, since I need to validate that a valid country is selected from the autocomplete. In this way I have the validation that country is filled, and the countryCode is selected (the countryCode is needed server side). — Rohi, Feb 23 '13 at 15:52
Can you check http://jsfiddle.net/arunpjohny/68uu5/3/ and see whether your requirement is met — Arun P Johny, Feb 23 '13 at 15:54
Also see this answer for the proper way to use the `ignore` option. Should be `ignore: []` See http://stackoverflow.com/a/8565769/594235 — Sparky, Feb 23 '13 at 17:22

score 1 · Accepted Answer · answered Feb 23 '13 at 15:49

1

I think the problem is with the countryCode validation

You can try

countryCode: {
    required: function(element){
        return $("#country").val().length > 0;
    }
}

Demo: Fiddle

answered Feb 23 '13 at 15:49

Arun P Johny

384,651
66
527
531

great thanks a lot! I thought the .validate() on country element would have done that.... do you think it's a bug to report to the developers? – Rohi Feb 23 '13 at 15:59
I think the `element` method is designed to be called with the callback methods, any way you can check with the developers – Arun P Johny Feb 23 '13 at 16:09

jquery validation plugin: validating hidden input, skips required input text

1 Answers1