I have looked at this question/answer, and many more like it, but I still cant get my form validation to switch tabs or move to the tab with the error.
Relevant jQuery:
$(document).ready(function () {
$("form[name=modify]").validate({
ignore: [],
rules: {
first_name: {
required: true,
},
surname: {
required: true
},
id_number: {
required: true
},
mobile_number: {
number: true,
minlength: 10,
},
home_number: {
number: true,
minlength: 10,
},
other_contact: {
number: true,
minlength: 10,
},
line1: {
required: true,
},
city_town: {
required: true,
},
postal_code: {
required: true,
minlength: 4,
},
curr_renumeration: {
required: true,
number: true,
},
expect_renumeration: {
required: true,
number: true
},
email: {
email: true,
required: true,
},
highlight: function (label) {
$(label).closest('.control-group').addClass('has-error');
console.log($(label).closest('.control-group').addClass('has-error'));
if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) {
$(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
$('#myTab').on('shown', function (e) {
console.log(this);
e.target // activated tab
$($(e.target).attr('href')).find("div.has-error :input:first").focus();
});
}
},
}
});
$("[type=submit]").submit(function (e) {
e.preventDefault();
});
});
You can view it here
What am I missing?
Can someone please help me? I cant get it to work.
UPDATE:
Okay so I have moved some code around and played a bit:
$("form[name=modify]").validate({
highlight : function(label) {
$(label).closest('.form-group').addClass('has-error');
$(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {
alert("error from if");
if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {
alert("error from each");
var id = $(tab).attr("id");
console.log(id);
$('a[href="#' + id + '"]').tab('show');
}
});
},
invalidHandler : function(event, validator) {
// 'this' refers to the form
$('#myTab').on('shown', function(e) {
console.log(this);
e.target;// activated tab
$($(e.target).attr('href')).find("fieldset.has-error :input:first").focus();
});
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
$("div.has-error span").html(message);
$("div.has-error").show();
} else {
$("div.has-error").hide();
}
},
ignore : [],
rules : {
first_name : {
required : true,
},
surname : {
required : true
},
id_number : {
required : true
},
mobile_number : {
number : true,
minlength : 10,
},
home_number : {
number : true,
minlength : 10,
},
other_contact : {
number : true,
minlength : 10,
},
line1 : {
required : true,
},
city_town : {
required : true,
},
postal_code : {
required : true,
minlength : 4,
},
curr_renumeration : {
required : true,
number : true,
},
expect_renumeration : {
required : true,
number : true
},
email : {
email : true,
required : true,
},
}
});
All works well, except it stops at this line if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {
and if I swop it with $(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {
it stop as well...
Updated jsFiddle
Why does it not go into the .each
or thif
?