178
rated 0 times
[
181]
[
3]
/ answers: 1 / hits: 15415
/ 11 Years ago, fri, december 13, 2013, 12:00:00
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 ?
More From » jquery
