- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 jquery 步骤向导(3 个步骤),其中存在一种形式。当传递到下一步时,我尝试使用 valid() 方法验证第一步表单字段(没问题),但是当我尝试验证第二步时,jquery validate 总是返回 true。因此它传递到第三步并结束步骤而不验证第二步。请问怎么做?
我有 1 个函数用于验证每个向导步骤。
$(document).ready(function(){
/* Activate the tooltips */
$('[rel="tooltip"]').tooltip();
$('.wizard-card').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-next',
'previousSelector': '.btn-previous',
onInit : function(tab, navigation, index){
//check number of tabs and fill the entire row
var $total = navigation.find('li').length;
$width = 100/$total;
$display_width = $(document).width();
if($display_width < 600 && $total > 3){
$width = 50;
}
navigation.find('li').css('width',$width + '%');
},
onNext: function(tab, navigation, index){
if(index == 1){
return validateFirstStep();
} else if(index == 2){
return validateSecondStep();
} else if(index == 3){
return validateThirdStep();
} //etc.
},
onTabClick : function(tab, navigation, index){
// Disable the posibility to click on tabs
return false;
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var wizard = navigation.closest('.wizard-card');
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$(wizard).find('.btn-next').hide();
$(wizard).find('.btn-finish').show();
} else {
$(wizard).find('.btn-next').show();
$(wizard).find('.btn-finish').hide();
}
}
});
// Prepare the preview for profile picture
$("#wizard-picture").change(function(){
readURL(this);
});
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
});
$('[data-toggle="wizard-checkbox"]').click(function(){
if( $(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('active');
$(this).find('[type="checkbox"]').attr('checked','true');
}
});
$height = $(document).height();
$('.set-full-height').css('height',$height);
});
function validateFirstStep(){
$(".wizard-card form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
}
},
messages: {
firstname: "Please enter your First Name",
lastname: "Please enter your Last Name",
email: "Please enter a valid email address",
}
});
if(!$(".wizard-card form").valid()){
//form is invalid
return false;
}
return true;
}
function validateSecondStep(){
//code here for second step
$(".wizard-card form").validate({
rules: {
matri: "required"
},
messages: {
matri: "Matricule required"
}
});
if(!$(".wizard-card form").valid()){
console.log('invalid');
return false;
}
return true;
}
最佳答案
只需替换掉你的refreshAnimation函数
来自:
function refreshAnimation($wizard, index){
total_steps = $wizard.find('li').length;
move_distance = $wizard.width() / total_steps;
step_width = move_distance;
move_distance *= index;
$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform':'translate3d(' + move_distance + 'px, 0, 0)',
'transition': 'all 0.3s ease-out'
});
}
至
function refreshAnimation($wizard, index){
total_steps = $wizard.find('.nav li').length;
move_distance = $wizard.width() / total_steps;
step_width = move_distance;
move_distance *= index;
$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform':'translate3d(' + move_distance + 'px, 0, 0)',
'transition': 'all 0.3s ease-out'
});
}
关于javascript - JQuery验证插件: Unable to validate the second setp of bootstrap wizard,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42009777/
这个问题在这里已经有了答案: android studio adb Syntax error: ")" unexpected (4 个答案) 关闭 5 年前。 我确实将我的工作室更新到 Linux
当我打开 Android Studio 时,它会显示下面的对话框,我的应用程序无法以 Debug模式运行。 最佳答案 找到sdk->platform-tool文件夹,然后运行命令adb tcpip 5
我在 Fedora 33 机器上使用了 VSCode (1.52.1) 一段时间。 我正在使用 Docker 扩展 (v1.9.0) 但由于某种原因,在过去几天中,当我尝试将 VSCode 附加到 D
我正在尝试为我的任务加载一个名为“tr_model.h5”的预训练模型,但出现以下错误: Traceback (most recent call last): File "Trigger_Proje
我最近在 Google Play 中发布了一个 Android 应用程序,到目前为止一切看起来都很棒,但有一个异常(exception)(见下文),我有时会收到控制台崩溃的消息,它只发生在某些用户身上
单击警告时,我收到此消息。这是案件的截图。 错误写道, Unable to open 'warning.cpp': Unable to read file '/Users/dimen/code/C++
重新编译 php 后,当我使用 php cli 时出现以下错误: PHP Warning: PHP Startup: imap: Unable to initialize module Module
使用 git 1.6.4.2,当我尝试 git pull 时出现此错误: error: unable to resolve reference refs/remotes/origin/LT558-op
我是 Kotlin 的新手,我正在学习教程。运行我的应用程序会导致它在运行时崩溃。我在底部导航栏应用程序中有三个 fragment 和一个主要 Activity 。我的目标实际上只是成功运行该应用程序
我在 Windows 10 64 位上运行 Android Studio。我在 5 月 20 日早上升级到了最新的版本和 SDK,从那时起,我在打开 Android Studio 时收到上述错误。我还
因此,我创建了一个 GitHub 操作,该操作应该在发生推送时构建 docker 镜像并将其推送到 docker hub。所以这是我的 GitHub 操作:(第一次创建 GitHub 操作) name
当这些问题中的任何一个都没有帮助我时,这意味着我需要删除并重新安装 Android Studio。 这是错误: Error initializing ADB: Unable to create Deb
Iam running the latest OSX/Flutter/XCode Versions using flutter, android studio and firebase and
我最近重新安装了 ubuntu 20.04.3,在做了一些设置后,我现在在运行 apt update 时总是收到以下错误.我一定是不小心删除了某种缓存文件或目录,但我不知道如何诊断或解决这个问题。 任
今天,当我将更改推送到 Gitlab 中的代码存储库时,我才开始在 Gitlab 中收到此错误消息。 Gitlab fatal: unable to access '.......' SSL Cert
我正在使用 Protractor 和 Jasmine 。 我已经确定了 chrome 驱动程序版本:2.32.498550 (latest)与 Chrome 测试版不兼容 (Version 62.0.
我正在尝试使用 terraform (0.12.24) 和多个 Docker 提供程序(插件版本 2.7.0)执行简单部署。我使用下面的 Terraform 模板的目的是将两个不同的容器部署到两个不同
这个问题我看了很久,最后决定在这里提出来。我需要维护一些用 Delphi 2007 for .NET (ASP.NET 2.0) 编写的应用程序。通常,第一次运行应用程序(使用 IIS)时,我会收到经
如何修复 - 无法创建调试桥:无法启动 adb 服务器:无法检测 adb 版本,adb 输出:/home/dilip/Downloads/sdk/platform-tools/adb: 1:/home
通过命令提示符连接到 android 中的 Sqlite DB 时出现错误。 以下是我遵循的步骤: 我已经在 android 中通过 java 程序创建了 Sqlite 数据库。创建表并向其中插入数据
我是一名优秀的程序员,十分优秀!