CODEWITHSUNDEEP
jqueryvalidationjquery-pluginsjquery-validatehidden-field
Rohi
Rohi

Reputation: 385

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

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>

Upvotes: 0

Views: 3041

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

I think the problem is with the countryCode validation

You can try

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

Demo: Fiddle

Upvotes: 1

Related Questions