我遇到了Uncaught ReferenceError：HTMLAnchorElement.onclick中未定义上一个 请帮助我，我已经尝试过针对同一问题提供的所有解决方案，但无济于事。 我已经有了jquery版本和bootstrap版本。 我将脚本和html标签的完整代码粘贴到放置按钮的位置。
<ul class="pager wizard">
<li class="previous"><a href="javascript:;" >Previous</a></li>
<li class="next"><a href="javascript: void(0);" onclick="onPrevious(tab, navigation, index);">Next</a></li>
</ul>
<script>
$(document).ready(function() {
// You don't need to care about this function
// It is for the specific demo
function adjustIframeHeight() {
var $body = $('body'),
$iframe = $body.data('iframe.fv');
if ($iframe) {
// Adjust the height of iframe
$iframe.height($body.height());
}
}
$('#installationForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// This option will not ignore invisible fields which belong to inactive panels
excluded: ':disabled',
fields: {
type_of_service: {
validators: {
notEmpty: {
message: 'The type of service is required'
}
}
},
academic_level: {
validators: {
notEmpty: {
message: 'The academic level is required'
}
}
},
type_of_paper: {
validators: {
notEmpty: {
message: 'The type of paper is required'
}
}
},
topic: {
validators: {
notEmpty: {
message: 'The topic is required'
}
}
},
subject: {
validators: {
notEmpty: {
message: 'The subject is required'
}
}
},
type_of_citation: {
validators: {
notEmpty: {
message: 'The type of citation is required'
}
}
},
order_deadline: {
validators: {
notEmpty: {
message: 'The order deadline is required'
}
}
},
pages: {
validators: {
notEmpty: {
message: 'The number of pages is required'
}
}
},
type_of_spacing: {
validators: {
notEmpty: {
message: 'The type of spacing is required'
}
}
},
category_of_writer: {
validators: {
notEmpty: {
message: 'Select your prefered writer'
}
}
},
fullname: {
validators: {
notEmpty: {
message: 'Please specify your full name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
dbServer: {
validators: {
notEmpty: {
message: 'The server IP is required'
},
ip: {
message: 'The server IP is not valid'
}
}
},
dbName: {
validators: {
notEmpty: {
message: 'The database name is required'
}
}
},
dbUser: {
validators: {
notEmpty: {
message: 'The database user is required'
}
}
}
}
})
.bootstrapWizard({
tabClass: 'nav nav-pills',
onTabClick: function(tab, navigation, index) {
return validateTab(index);
},
onNext: function(tab, navigation, index) {
var numTabs = $('#installationForm').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
$('#installationForm').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 = $('#installationForm').find('.tab-pane').length;
$('#installationForm')
.find('.next')
.removeClass('disabled') // Enable the Next button
.find('a')
.html(index === numTabs - 1 ? 'Place Order' : 'Next');
// You don't need to care about it
// It is for the specific demo
adjustIframeHeight();
}
});
function validateTab(index) {
var fv = $('#installationForm').data('formValidation'), // FormValidation instance
// The current tab
$tab = $('#installationForm').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;`enter code here`
}
});`enter code here`
</script>
答案 0 :(得分：1)
一种简单的解决方案是在全局范围内声明它，并在jQuery范围内重用它。
<ul class="pager wizard">
<li class="previous"><a href="javascript:;" >Previous</a></li>
<li class="next"><a href="javascript: void(0);" onclick="onPrevious(tab, navigation, index);">Next</a></li>
</ul>
<script>
// Your function is declared globally.
function onPrevious(tab, navigation, index) {
return validateTab(index + 1);
}
$(document).ready(function() {
// You don't need to care about this function
// It is for the specific demo
function adjustIframeHeight() {
var $body = $('body'),
$iframe = $body.data('iframe.fv');
if ($iframe) {
// Adjust the height of iframe
$iframe.height($body.height());
}
}
$('#installationForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// This option will not ignore invisible fields which belong to inactive panels
excluded: ':disabled',
fields: {
type_of_service: {
validators: {
notEmpty: {
message: 'The type of service is required'
}
}
},
academic_level: {
validators: {
notEmpty: {
message: 'The academic level is required'
}
}
},
type_of_paper: {
validators: {
notEmpty: {
message: 'The type of paper is required'
}
}
},
topic: {
validators: {
notEmpty: {
message: 'The topic is required'
}
}
},
subject: {
validators: {
notEmpty: {
message: 'The subject is required'
}
}
},
type_of_citation: {
validators: {
notEmpty: {
message: 'The type of citation is required'
}
}
},
order_deadline: {
validators: {
notEmpty: {
message: 'The order deadline is required'
}
}
},
pages: {
validators: {
notEmpty: {
message: 'The number of pages is required'
}
}
},
type_of_spacing: {
validators: {
notEmpty: {
message: 'The type of spacing is required'
}
}
},
category_of_writer: {
validators: {
notEmpty: {
message: 'Select your prefered writer'
}
}
},
fullname: {
validators: {
notEmpty: {
message: 'Please specify your full name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
dbServer: {
validators: {
notEmpty: {
message: 'The server IP is required'
},
ip: {
message: 'The server IP is not valid'
}
}
},
dbName: {
validators: {
notEmpty: {
message: 'The database name is required'
}
}
},
dbUser: {
validators: {
notEmpty: {
message: 'The database user is required'
}
}
}
}
})
.bootstrapWizard({
tabClass: 'nav nav-pills',
onTabClick: function(tab, navigation, index) {
return validateTab(index);
},
onNext: function(tab, navigation, index) {
var numTabs = $('#installationForm').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
$('#installationForm').formValidation('defaultSubmit');
// For testing purpose
//$('#completeModal').modal();
}
return true;
},
onPrevious: onPrevious, // You reuse it here.
onTabShow: function(tab, navigation, index) {
// Update the label of Next button when we are at the last tab
var numTabs = $('#installationForm').find('.tab-pane').length;
$('#installationForm')
.find('.next')
.removeClass('disabled') // Enable the Next button
.find('a')
.html(index === numTabs - 1 ? 'Place Order' : 'Next');
// You don't need to care about it
// It is for the specific demo
adjustIframeHeight();
}
});
function validateTab(index) {
var fv = $('#installationForm').data('formValidation'), // FormValidation instance
// The current tab
$tab = $('#installationForm').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;
}
});
</script>
编辑
这是一个代码片段，以证明它有效。
<ul class="pager wizard">
<li class="previous"><a href="javascript:;" >Previous</a></li>
<li class="next"><a href="javascript: void(0);" onclick="onPrevious('tab', 'navigation', 'index');">Next</a></li>
</ul>
<script>
// Your function is declared globally.
function onPrevious(tab, navigation, index) {
console.log(tab, navigation, index)
//return validateTab(index + 1);
}
</script>