0

I like using jquery validate to validate my forms, I have to use a background image for the radio input.

below is the html, css and jquery for the validation.

I decided to add a simple radio: and added it to the rules and it displayed the error message when I tried to submit the form, only for that input, but not for upgrade or route radio fields.

This makes me believe the img background hack for a radio field is causing the validation not to work. Probably because I have display: none; for the radio input type in the css.

HTML:

<input type="radio" id="u1" name="upgrade" value="1" />
<label for="u1"><span></span></label>

CSS:

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size: 14px;
    position: absolute;
    top: 25px;
    right: -3px;
}

input[type="radio"] + label span {
    display:inline-block;
    width: 38px;
    height: 28px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/sub-vote-box-checkbox.png') no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url('../images/sub-vote-box-checkbox-checked.png') no-repeat;
}

JavaScript:

$("#vote-route-upgrade-form").validate({
    rules: {
        route: {
            required: true,
        },
        upgrade: {
            required: true,
        },
    },

    submitHandler: function() {
        $('#vote-modal').modal('hide');
        $('#thanks-modal').modal('show');
    }
});
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Brad
  • 12,054
  • 44
  • 118
  • 187
  • css, affecting the validation of a form? that doesn't sound right to me. There are a few trailing commas in your js that will break oldIE – Kevin B Jan 22 '14 at 22:38
  • @KevinB I commented out display: none; on the first css rule and it now shows the error message, but I need to display the background image in place of the traditional looking radio fields. – Brad Jan 22 '14 at 22:40
  • my point was that the validation should be unaffected. Could it affect how the validation displays errors? Yes! but that's configurable. – Kevin B Jan 22 '14 at 22:41
  • 1
    Also see: http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields/8565769#8565769 – Sparky Jan 22 '14 at 23:41

1 Answers1

1

See this answer (and upvote it :)).

Elements with display:none are ignored by validate plugin.

Community
  • 1
  • 1
n1k1ch
  • 2,594
  • 3
  • 31
  • 35