【问题标题】:bootstrap validator reset form not working引导验证器重置表单不起作用
【发布时间】:2014-12-05 11:25:32
【问题描述】:

我正在尝试使用引导验证器重置表单

当我点击重置时,它会删除输入值,但是当我点击提交时,即使输入为空,它仍在提交,当它应该显示错误时

这里是js

    $('#shortener').bootstrapValidator({
        container: '#sstatus',
        fields: {
            url: {
                validators: {
                    notEmpty: {
                        message: 'Enter a url!'
                    },
                    uri: {
                        message: 'URL is not a valid url, include http://'
                    }
                }
            }
        }
    }).on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            console.log('in');

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post('ajax/new_url.php', $form.serialize(), function(result) {

                console.log('works'+result.message);

                $('#shortener').fadeOut('fast', function(){
                    $form.bootstrapValidator('resetForm', true); 
                });

                $(document).on('click', '#shorten_again', function(e){
                    e.preventDefault();
                });

            }, 'json');
    });

【问题讨论】:

    标签: jquery twitter-bootstrap validation


    【解决方案1】:

    $('form').bootstrapValidator('resetForm', true);

    【讨论】:

      【解决方案2】:

      提交、清除、重置时需要解决方法:

          .on('init.field.bv', function(e, data) {
              // data.bv      --> The BootstrapValidator instance
              // data.field   --> The field name
              // data.element --> The field element
      
              var $parent = data.element.parents('.form-group'),
                  $icon   = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]');
      
              // From v0.5.3, you can retrieve the icon element by
              // $icon = data.element.data('bv.icon');
      
              $icon.on('click.clearing', function() {
                  // Check if the field is valid or not via the icon class
                  if ($icon.hasClass('glyphicon-remove')) {
                      // Clear the field
                      data.bv.resetField(data.element);
                  }
              });
          })
      

      参考:BootstrapValidator Clearing Field Example

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-12-10
        • 1970-01-01
        • 2017-09-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-02-21
        • 1970-01-01
        相关资源
        最近更新 更多