Question

当我使用jQuery验证插件验证多选字段时，错误消息将显示在多选选项上方。如何在多选？

下显示它？

＆＃13;

$('.multiselect').multiselect({
  onChange: function(element, checked) {
    $('.multiselect').valid();
  },
  buttonWidth: '100%',
  numberDisplayed: 6,
  buttonContainer: '<div class="btn-group ng-multiple-bs-select" />',
  buttonText: function(options) {
    if (options.length === 0) {
      return 'choose';
    } else {
      var selected = '';
      options.each(function() {
        selected += $(this).text() + ', ';
      });
      return selected.substr(0, selected.length - 2);
    }
  },
});


$('#frm').validate({
  rules: {
    kimliktipi: "required",
    kimlikserino: "required",
    cinsiyet: "required"
  },
  ignore: ':hidden:not(".multiselect")',

  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block small',
  errorPlacement: function(error, element) {
    if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element); // ng-multiple-bs-select
    }
  },
  submitHandler: function() {
    alert('valid form');
    return false;
  }
});

＆＃13;

<!-- External Resources from the Fiddle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

<!-- End of External Resources -->

<form method="post" name="frm" id="frm" role="form">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="form-group">
        <label class="control-label" for="kimliktipi">Kimlik Tipi</label>
        <select name="kimliktipi" id="kimliktipi" class="form-control multiselect" size="2">
          <option value="1">Kimlik</option>
          <option value="2">Pasaport</option>
        </select>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="form-group">
        <label class="control-label" for="kimlikserino">Kimlik Seri ve No</label>
        <input name="kimlikserino" type="text" class="form-control col-md-1" id="kimlikserino" placeholder="A12-123456" value="" />
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="form-group">
        <label class="control-label" for="cinsiyet">Cinsiyet</label>
        <select name="cinsiyet" id="cinsiyet" class="form-control multiselect" size="2">
          <option value="k">Kadın</option>
          <option value="e">Erkek</option>
        </select>
      </div>
    </div>
  </div>
  <button name="kaydet" type="submit" class="btn btn-default btn-lg center-block" value="kaydet">SAVE</button>
</form>

＆＃13;

这是JSFiddle。

Answer 1

您可以更改errorPlacement中的$('#frm').validate({...})功能，如下所示。如果element具有类multiselect，则在其旁边的.btn-group之后添加错误消息，否则直接在元素之后添加。

errorPlacement: function(error, element) {
    if (element.hasClass('multiselect')) {
        error.insertAfter(element.next('.btn-group'));
    } else {
        error.insertAfter(element);
    }
}

DEMO

Answer 2

public partial class MyControl: UserControl, IViewFor<MyViewModel>
{
    // register property in the dependency property tracker
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register(nameof(Text), typeof(string), typeof(MyControl));

    // get/set value from/to dependency property tracker
    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public MyControl()
    {
        InitializeComponent();

        this.WhenActivated(d =>
        {
            // Note: always dispose bindings with composite disposable
            // Note: use overloads for value conversion or one-way-binding as needed
            this.Bind(ViewModel, vm => vm.Text, v => v.Text).DisposeWith(d);
        });
    }

    #region IViewFor
    object IViewFor.ViewModel
    {
        get => ViewModel;
        set => ViewModel = value as MyViewModel;
    }

    public MyViewModel ViewModel
    {
        get => DataContext as MyViewModel;
        set => DataContext = value;
    }
    #endregion
}

代替“ input_control_name”，输入您在html中定义的输入字段名称值

Answer 3

只需更改用于插入显示消息的范围的方法。

方法insertAfter（小提琴中的第41行和第43行）将一个元素插入另一个元素，而不是使用此元素：insertBefore并且跨度将插入元素之前。

Fiddle

在多选而不是在其上方显示验证错误消息

3 个答案:

DEMO