结合使用jQuery Validate和Select2进行验证不起作用 [英] Using jQuery Validate with Select2 for validation not working

问题描述

我有一个带有 SELECT2 的表单.

以下是示例图片:

您可以在图像上看到，错误标签与其他错误标签不同.

As you can see on the image the error label is not the same as the other error labels.

有两个问题:

1. 如何在SELECT2上修复错误标签，使其与其他错误标签相同?
2. 当SELECT2更改其值时，如何添加或删除验证?(对不起，我是SELECT2的新手)

这是我的验证表单的代码:

Here is my code to validated my form:

$("#systemcodeForm").validate({
    submitHandler: function (form) {
      
  },
  rules: {
    systemtype: {
      required: true         
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    }
  },
  errorPlacement: function(label, element) {
    if(element.hasClass('web-select2') && element.next('.select2-container').length) {
      label.insertAfter(element.next('.select2-container'));
    }
    else{
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('has-danger')
    $(element).addClass('form-control-danger')
  },
  success: function(label,element) {
    $(element).parent().removeClass('has-danger')
    $(element).removeClass('form-control-danger')
    label.remove();
  }
});

这是我的HTML代码:

Here is my HTML code:

<form class="cmxform" id="systemrightsForm" method="post" action="#">
 <div class="row">
   <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
            <option value="">-- SELECT SYSTEM TYPE --</option>
            <option value="1">Option 1</option>
        </select>
      </div>
    </div>
</div>
<div class="row">
   <div class="col-md-12">
    <div class="form-group">
      <label class="control-label" for="systemcode">System Code</label>
      <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autocomplete="off" maxlength="15">
     </div>
   </div>
</div>
<div class="row">
  <div class="col-md-12">
   <div class="form-group">
     <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autocomplete="off" maxlength="40">
    </div>
  </div>
</div>
</form>

推荐答案

您可以简单地使用本机 select2

You can simply use native select2 change function to watch for a change on your select option selection.

当您使用 jQuery .validate来对选择输入进行 validate 时，默认情况下 .validate 将不会在之后隐藏标签选项被选中.

As you are using jQuery .validate to validate the select input so by default .validate will not hide the label after option is selected.

为了获得正确的 label ，我们需要使用 global变量存储label元素，然后删除该选择 option 时使用标签.

In order to get the correct label we need to use a global variable to store the label element and then remove that label on selection of an option.

实时工作演示:(两个问题均已解决)

Live Working Demo: (both question solved)

var mySelect2 = $('#systemtype')

//initiate select
mySelect2.select2();

//global var for select 2 label
var select2label

$("#systemrightsForm").validate({

  rules: {
    systemtype: {
      required: true
    },
    systemcode: {
      required: true
    },
    systemdesc: {
      required: true
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    },

  },
  errorPlacement: function(label, element) {
    if (element.hasClass('web-select2')) {
      label.insertAfter(element.next('.select2-container')).addClass('mt-2 text-danger');
      select2label = label
    } else {
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('is-invalid')
    $(element).addClass('form-control-danger')
  },
  success: function(label, element) {
    $(element).parent().removeClass('is-invalid')
    $(element).removeClass('form-control-danger')
    label.remove();
  },
  submitHandler: function(form) {

  },
});

//watch the change on select
mySelect2.on("change", function(e) {
  select2label.remove(); //remove label
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<form class="cmxform" id="systemrightsForm">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
          <option value="">-- SELECT SYSTEM TYPE --</option>
          <option value="1">Option 1</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label" for="systemcode">System Code</label>
        <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autocomplete="off" maxlength="15">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autocomplete="off" maxlength="40">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>

</form>

这篇关于结合使用jQuery Validate和Select2进行验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！