【问题标题】:Bootstrap Validator still shows error message after setting value through jquery通过 jquery 设置值后,Bootstrap Validator 仍然显示错误消息
【发布时间】:2017-07-13 05:21:50
【问题描述】:

我正在通过 jquery change() 根据另一个下拉列表 02 更改下拉列表 01 的值。我已经在表单中实现了 BootsrapValidation()。我的问题是,如果下拉 01 显示必填字段错误消息,然后我从 jquery 设置下拉 01 值。但是错误信息仍然存在。

我在change() 的末尾添加了$('#form1').bootstrapValidator();,但没有运气。任何想法都非常感谢。

从这里检查小提琴:https://jsfiddle.net/k2vtkka1/5/

这是我的代码。

$(document).ready(function() {


$('.subSort').change(function(){;
    var sub_code = $(this).val();
    var code_id = $(this).attr("id");

    var code_prefix = sub_code.substring(0, 4);
    var id_prefix = code_id.substring(4, 5);

    var new_sub_code = code_prefix+'102';
    var new_id_no = parseInt(id_prefix)+1;

    $('#sub_'+new_id_no).val(new_sub_code);
    $('#update_student_form').bootstrapValidator();
});


$('#update_student_form').bootstrapValidator({
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: { 
            sub_6: {
            validators: {
                notEmpty: {
                    message: 'Please select main sub 01 derived'
                }
               }
            }
        }
    })


    .on('success.form.bv', function(e) {
            $('#update_student_form').data('bootstrapValidator').resetForm();

        e.preventDefault();

        var $form = $(e.target);
        var bv = $form.data('bootstrapValidator');

        // Use Ajax to submit form data
        $.post($form.attr('action'), $form.serialize()).done(function(data) {
            if (data.trim().length >0)
            {
                $('#error_message').slideDown({ opacity: "show" }, "slow");
            }
            else {
                $('#success_message').slideDown({ opacity: "show" }, "slow");
            }
        });
});

【问题讨论】:

  • 你能创建一个你的问题的小提琴例子吗?这将很容易理解和纠正问题
  • 嗨,我创建了一个小提琴。检查这个jsfiddle.net/k2vtkka1/5
  • 检查这些步骤;重新加载页面,点击保存。您可以看到错误消息。现在更改 Main Sub 01,Main Sub 01 Derived 也得到更改。但错误信息仍然存在
  • 请在下方查看我的回答

标签: jquery validation twitter-bootstrap-3 bootstrapvalidator jqbootstrapvalidation


【解决方案1】:

终于找到了问题所在:-

其实代码:-

$('#sub_'+new_id_no).val(new_sub_code);

没有更改第二个选择框中的值(尽管它显示该值已更改)。这就是为什么在出现错误后它没有继续进行。

您需要在那里触发change(),以便它实际更改值,然后您的验证器获取它。

所以把上面的行改成这样:-

$('#sub_'+new_id_no).val(new_sub_code).change();

工作示例:-https://jsfiddle.net/fn0r4nvh/

参考:-change()

【讨论】:

  • 奇怪。我以前从来没有想过这个。这意味着当使用$('#elementId').val('something') 时不会触发事件。并且 Bootstrap 验证器必须依赖于事件触发器。
  • @guitarlass 实际上它类似于引导验证器以不同的方式处理元素,当您通过外部脚本代码进行一些更改时,它不会识别这些更改,直到我们通过change()强制它识别/跨度>
  • 是的,其他验证者从来没有这样过。谢谢你的回答!
  • 也成功测试了$('#elementId').trigger('change');
  • @guitarlass great.很高兴为您提供帮助:):)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-09-07
  • 2013-08-26
  • 2012-04-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-05
相关资源
最近更新 更多