Formvalidator.io でいくつか問題が発生しています。私の推測では、コードのネストと関係があると思います...
以下のコード例の 972 行目でエラーが発生します。エラーは次のとおりです。
Uncaught TypeError: Cannot read property 'id' of null
コードの 972 行目は次のとおりです。
var selected_department_id = $('#departmentName').select2('data').id;
フォームを検証しようとすると、エラーが発生します。
意図console.log(selected_department_id)した結果が得られたので、関数が宣言され、意図したとおりに機能していることがわかります。
このエラーの原因について何か提案はありますか?
$.map(corporations_info, function(obj) {
obj.id = obj.id || obj.corporation_id; // replace pk with your identifier
$('#corporationName').append($("<option></option>").attr("value", obj.id).text(obj.name));
return obj;
});
$('#extensionSetup')
.find('[name="corporationName"]')
.select2({
dropdownCssClass: 'dropdown-inverse',
placeholder: 'Select your Corporation',
minimumResultsForSearch: 5
})
.change(function(e) {
//$('#extensionSetup').formValidation('revalidateField', 'departmentName');
})
.end()
.find('[name="departmentName"]')
.select2({
dropdownCssClass: 'dropdown-inverse',
placeholder: 'Select your Department',
minimumResultsForSearch: 5
})
.on('select2-close', function() {
//$('#extensionSetup').formValidation('revalidateField', 'departmentName');
})
.change(function(e) {
//$('#extensionSetup').formValidation('revalidateField', 'departmentName');
})
.end()
.find('[name="employeeName"]')
.select2({
dropdownCssClass: 'dropdown-inverse',
placeholder: 'Find your name',
minimumResultsForSearch: 5,
containerCssClass: 'select2-custom-search',
dropdownCssClass: 'select2-custom-search'
})
.on('select2-opening', function() {
console.log('opening');
})
.on('select2-open', function() {
$('body')
.find('.select2-container.select2-custom-search')
.addClass('in-focus');
$('body')
.find('.select2-container.select2-custom-search')
.find('.select2-choice')
.find('.select2-arrow')
.addClass('in-focus');
$('body')
.find('.select2-drop.select2-custom-search')
.find('.select2-search')
.find('input')
.attr("placeholder", "Find your name");
$('body')
.find('.select2-container.select2-custom-search')
.find('.select2-choice')
.find('.select2-chosen')
.hide();
})
.on('select2-select', function() {
$('body')
.find('.select2-drop.select2-custom-search')
.find('.select2-search')
.find('input')
.attr("placeholder", "");
$('body')
.find('.select2-container.select2-custom-search')
.find('.select2-choice')
.find('.select2-chosen')
.show();
})
.on('select2-close', function() {
$('body')
.find('.select2-container.select2-custom-search')
.removeClass('in-focus');
$('body')
.find('.select2-container.select2-custom-search')
.find('.select2-choice')
.find('.select2-arrow')
.removeClass('in-focus');
$('body')
.find('.select2-container.select2-custom-search')
.find('.select2-choice')
.find('.select2-chosen')
.addClass('selected')
.show();
console.log('close');
})
.on('select2-close', function() {
$('.select2-custom-search .select2-search input')
.closest('.input-group')
.find('.input-group-addon')
.removeClass('in-focus');
})
.end()
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'material-icons valid-icon',
invalid: 'material-icons invalid-icon',
validating: 'material-icons validating-icon'
},
fields: {
corporationName: {
validators: {
callback: {
callback: function(value, validator, $field) {
if (value === '') {
return {
valid: false,
message: 'Please select the corporation you are associated with.',
};
}
return {
valid: true,
};
}
}
}
},
departmentName: {
validators: {
callback: {
callback: function(value, validator, $field) {
if (value === '') {
return {
valid: false,
message: 'Please select the department you are associated with.',
};
}
return {
valid: true,
};
}
}
}
}
}
})
// This event will be triggered when the field passes given validator
.on('success.validator.fv', function(e, data) {
// data.field --> The field name
// data.element --> The field element
// data.result --> The result returned by the validator
// data.validator --> The validator name
if (data.field === 'corporationName') {
$('#step3')
.find('.dialog-warning.employees')
.fadeOut()
var selected_corporation_id = $('#corporationName').select2('data').id;
var selected_corporation_name = $('#corporationName').select2('data').text;
//var selected_department = $('#departmentName').select2('data').id;
var departments_data = $.map(departments_info, function(obj) {
if (obj.corporation_id === selected_corporation_id) {
return obj;
}
});
if (!departments_data.length) {
//console.info('YES!');
console.warn('This corporation has no departments.');
data.element
.closest('.form-group')
.removeClass('has-success')
.addClass('has-error');
data.element
.closest('.form-group')
.find('.form-control-feedback')
.removeClass('valid-icon')
.addClass('invalid-icon');
data.element
.closest('.form-group')
.find('.help-block')
.attr("data-fv-result", "INVALID");
$.when($('.container-for-departmentName').fadeOut()).done(function() {
$('#step3')
.find('.dialog-warning.departments')
.fadeIn()
.find('.corporationName')
.text(selected_corporation_name);
$('#step3')
.find('.next-step')
.addClass('reload')
.text('Reload');
$('#extensionSetup')
.find('[name="departmentName"]')
.select2("enable", false);
});
} else {
//console.warn('FUBAR!');
$('#extensionSetup')
.find('[name="departmentName"]')
.closest('.form-group')
.removeClass('has-error');
$('#extensionSetup')
.find('[name="departmentName"]')
.closest('.form-group')
.find('.form-control-feedback')
.removeClass('invalid-icon');
$('#extensionSetup')
.find('[name="departmentName"]')
.closest('.form-group')
.find('.help-block')
.attr("data-fv-result", "");
$.when($('#step3').find('.dialog-warning.departments').fadeOut()).done(function() {
$.when($('#extensionSetup')
.find('[name="departmentName"]')
.select2('data', null)
.find('option')
.each(function() {
if ($(this).val() === '') {
// Do nothing to keep first option intact
} else {
$(this).remove();
}
})).done(function() {
$('#step3')
.find('.next-step')
.removeClass('reload')
.text('Save and Continue');
$.map(departments_data, function(obj) {
obj.id = obj.id || obj.department_id; // replace pk with your identifier
$('#departmentName').append($("<option></option>").attr("value", obj.id).text(obj.name));
return obj;
});
$('#extensionSetup')
.find('[name="departmentName"]')
.select2("enable", true);
$('.container-for-departmentName').fadeIn();
});
});
}
}
if (data.field === 'departmentName') {
var selected_department_id = $('#departmentName').select2('data').id;
var selected_department_name = $('#departmentName').select2('data').text;
var coworkers_data = $.map(coworkers_info, function(obj) {
if (obj.department_id === selected_department_id) {
return obj;
}
});
if (!coworkers_data.length) {
console.warn('This Department has no employees');
data.element
.closest('.form-group')
.removeClass('has-success')
.addClass('has-error');
data.element
.closest('.form-group')
.find('.form-control-feedback')
.removeClass('valid-icon')
.addClass('invalid-icon');
data.element
.closest('.form-group')
.find('.help-block')
.attr("data-fv-result", "INVALID");
$('#step3')
.find('.dialog-warning.employees')
.fadeIn()
.find('.departmentName')
.text(selected_department_name);
$('#step3')
.find('.next-step')
.addClass('reload')
.text('Reload');
$('#extensionSetup')
.find('[name="employeeName"]')
.select2("enable", false);
} else {
data.element
.closest('.form-group')
.removeClass('has-error');
data.element
.closest('.form-group')
.find('.form-control-feedback')
.removeClass('invalid-icon');
data.element
.closest('.form-group')
.find('.help-block')
.attr("data-fv-result", "");
$.when($('#step3')
.find('.dialog-warning.employees')
.fadeOut()).done(function() {
$.when($('#extensionSetup')
.find('[name="employeeName"]')
.select2('data', null)
.find('option')
.each(function() {
if ($(this).val() === '') {
// Do nothing to keep first option intact
} else {
$(this).remove();
}
})).done(function() {
$('#step3')
.find('.next-step')
.removeClass('reload')
.text('Save and Continue');
$.map(coworkers_data, function(obj) {
obj.id = obj.id || obj.mobile_phone; // replace pk with your identifier
$('#employeeName').append($("<option></option>").attr("value", obj.id).text(obj.first_name + ' ' + obj.last_name));
return obj;
});
$('#extensionSetup')
.find('[name="employeeName"]')
.select2("enable", true);
});
});
}
}
})
.bootstrapWizard({
tabClass: 'nav nav-tabs',
onTabClick: function(tab, navigation, index) {
return validateTab(index);
},
onNext: function(tab, navigation, index) {
var numTabs = $('#extensionSetup').find('.tab-pane').length,
isValidTab = validateTab(index - 1);
if (!isValidTab) {
return false;
}
if (index === numTabs) {
// We are at the last tab
// Uncomment the following line to submit the form using the defaultSubmit() method
// $('#extensionSetup').formValidation('defaultSubmit');
// For testing purpose
$('#completeModal').modal();
}
return true;
},
onPrevious: function(tab, navigation, index) {
return validateTab(index + 1);
},
onTabShow: function(tab, navigation, index) {
// Update the label of Next button when we are at the last tab
var numTabs = $('#extensionSetup').find('.tab-pane').length;
$('#extensionSetup')
.find('.next-step ')
.removeClass('disabled') // Enable the Next button
.find('a')
.html(index === numTabs - 1 ? 'Install' : 'Next');
}
});
function validateTab(index) {
var fv = $('#extensionSetup').data('formValidation'), // FormValidation instance
// The current tab
$tab = $('#extensionSetup').find('.tab-pane').eq(index);
// Validate the container
fv.validateContainer($tab);
var isValidStep = fv.isValidContainer($tab);
if (isValidStep === false || isValidStep === null) {
// Do not jump to the target tab
return false;
}
return true;
}