[jQuery] Validate plugin with radio button in IE 6 & 7
Hi everyone,
I have a problem with my validation on my form in IE (6 AND 7)
This is a part of my form:
<label for="boy" class="radio"><span>boy</span><input type="radio"
id="boy" name="sex" value="boy" /></label>
<label for="girl" id="radio_girl" class="radio"><span>girl</
span><input type="radio" id="girl" name="sex" value="girl" /></label>
My Validation script:
jQuery.validator.addMethod("defaultvalue", function(value,
element) {
return this.optional(element) || element.defaultValue != value;
}, " ");
var text_inputs = $("form input[type=text]");
text_inputs.each(function(){
var input = $(this);
input.click(function(){
if(input.val() == this.defaultValue){
input.val("");
}
});
input.blur(function(){
if(input.val() == ""){
input.val(this.defaultValue);
}
});
});
$("#person_submit").click(function(){
$("#person_form").submit();
});
$("#person_form").validate({
errorElement: "span",
rules: {
firstname: {required: true, defaultvalue: true, minlength: 2},
lastname: {required: true, defaultvalue: true, minlength: 3},
street: {required: true, defaultvalue: true, minlength: 2},
nr: {required: true, defaultvalue: true},
zip: {required: true, defaultvalue: true, digits: true,
rangelength: [4, 4]},
city: {required: true, defaultvalue: true, minlength: 3},
day: {required: true, defaultvalue: true, digits: true, range:
[1,31]},
month: {required: true, defaultvalue: true, digits: true, range:
[1,12]},
year: {required: true, defaultvalue: true, digits: true, range:
[1965,1991]},
sex: {required: true},
email: {required: true, defaultvalue: true, email: true},
phone: {required: true, defaultvalue: true, rangelength: [9,15]}
},
messages: {
firstname: {required: "", defaultvalue: "", minlength: ""},
lastname: {required: "", defaultvalue: "", minlength: ""},
street: {required: "", defaultvalue: "", minlength: ""},
nr: {required: "", defaultvalue: ""},
zip: {required: "", defaultvalue: "", digits: "", rangelength: ""},
city: {required: "", defaultvalue: "", minlength: ""},
day: {required: "", defaultvalue: "", digits: "", range: ""},
month: {required: "", defaultvalue: "", digits: "", range: ""},
year: {required: "", defaultvalue: "", digits: "", range: ""},
sex: {required: "You have a sex right? Just click it…"},
email: {required: "", defaultvalue: "", email: ""},
phone: {required: "", defaultvalue: "", rangelength: ""}
},
errorPlacement: function(error, element) {
if (element.is(":radio"))
error.insertAfter(element.parent("label").next());
else
error.insertAfter(element);
},
submitHandler: function(form){
$("#loading-person").fadeIn('fast');
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: $(form).serialize(),
dataType: 'json',
success: function(msg){
$('div.form .msg').hide();
$('#msg_' + msg.data).fadeIn();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('div.form .msg').hide();
$("msg_error").fadeIn();
},
complete: function(data){
$("#loading-person").fadeOut();
}
});
}
});
When everything is correct filled in and I try to submit it in IE (FF
works fine) then my first label of my radio buttons get focused and it
don't submit it at all... Even when something I picked something...
Anyone that could help me?