javascript - Bootstrap ICheck-Helper 事件在 jquery 步骤插件中不起作用
问题描述
我正在使用带有 jquery 步骤的 jquery validate 插件,需要选中复选框以显示密码字段的密码。但复选框选中的事件不起作用。
这是我正在使用的代码 jquery 步骤插件
if ($('#business_register_form').length) {
var form = $('#business_register_form').show();
form.steps({
headerTag: 'h3',
bodyTag: 'fieldset',
transitionEffect: 'slideLeft',
labels: {
finish: LANG.register,
next: LANG.next,
previous: LANG.previous,
},
onStepChanging: function(event, currentIndex, newIndex) {
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex) {
return true;
}
// Needed in some cases if the user went back (clean up)
if (currentIndex < newIndex) {
// To remove error styles
form.find('.body:eq(' + newIndex + ') label.error').remove();
form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
}
form.validate().settings.ignore = ':disabled,:hidden';
return form.valid();
},
onFinishing: function(event, currentIndex) {
form.validate().settings.ignore = ':disabled';
return form.valid();
},
onFinished: function(event, currentIndex) {
form.submit();
},
});
}
使用 jquery validate 插件来验证表单
$('form#business_register_form').validate({
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else if (element.hasClass('input-icheck') && element.parent().hasClass('icheckbox_square-blue')) {
error.insertAfter(element.parent().parent().parent());
} else {
error.insertAfter(element);
}
},
rules: {
name: 'required',
email: {
email: true,
remote: {
url: '/business/register/check-email',
type: 'post',
data: {
email: function() {
return $('#email').val();
},
},
},
},
password: {
required: true,
minlength: 5,
},
confirm_password: {
equalTo: '#password',
},
username: {
required: true,
minlength: 4,
remote: {
url: '/business/register/check-username',
type: 'post',
data: {
username: function() {
return $('#username').val();
},
},
},
},
website: {
url: true,
},
},
messages: {
name: LANG.specify_business_name,
password: {
minlength: LANG.password_min_length,
},
confirm_password: {
equalTo: LANG.password_mismatch,
},
username: {
remote: LANG.invalid_username,
},
email: {
remote: LANG.email_taken,
},
},
});
这是 iCheck 检查是否选中复选框的代码
$('#rsp').on('ifChecked', function(event){
alert("hi");
// Check the checkbox state
if($(this).is(':checked')){
// Changing type attribute
$("#password").attr("type","text");
// Change the Text
$("#toggleText").text("Hide Password");
}else{
// Changing type attribute
$("#password").attr("type","password");
// Change the Text
$("#toggleText").text("Show Password");
}
});
$('#rsp').on('ifUnchecked', function(event){
alert("hello")
/// Check the checkbox state
if($(this).is(':checked')){
// Changing type attribute
$("#password").attr("type","text");
// Change the Text
$("#toggleText").text("Hide Password");
}else{
// Changing type attribute
$("#password").attr("type","password");
// Change the Text
$("#toggleText").text("Show Password");
}
});
解决方案
推荐阅读
- sql-server - 如何解决与 SQL Server 的连接问题
- angular - 选中角度复选框时无法关闭模式
- javascript - 如何处理异步回调承诺拒绝?
- python - “按钮”对象没有“销毁”属性?
- oracle-sqldeveloper - SQL Developer 19.1 不在工作表编辑器中显示匹配的表名列表
- java - 如何为java中的列表分配对象类型?
- flutter - 如何在 Flutter 中使用 Odata
- java - 强制关闭错误:我正在地图中的两点之间绘制路线
- java - 运行 javafx 应用程序时没有出现窗口
- fortran - 如何处理 Fortran Namelist 中的可选组