select2 required oninvalid custom text 不起作用

Question

这里我有 select option 使用 select2，它工作正常，但这里我想要 select2 required 和 oninvalid custom text 并且当我 select 并使用按钮形式保存时，但它一直在按钮上显示无效文本并且无法保存

如果我们直接select select2 并填写输入并直接保存

就可以了

但是当我在开头按 button 和最后一个 select 时它不起作用 select2，它会继续显示文本，这就是问题所在任何修复它的方法

$(".select").select2({
 placeholder: "Pilih . . .",
 allowClear: false,
 });

.w-100{
  width: 50%;
}
.btn{
  width: 100px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet">

<h4>FORM 1</h4>
<form action="ins.php" method="POST" >
  <select  class="select w-100" oninvalid="this.setCustomValidity('Tidak Boleh Kosong')" oninput="this.setCustomValidity('')"  required="" >
      <option value=""></option>
      <option value="1">Opsi 1</option>
      <option value="2">Opsi 2</option>
      <option value="3">Opsi 3</option>
      <option value="4">Opsi 4</option>
      <option value="5">Opsi 5</option>
  </select>
  <br><br>
  <input  type="text" class="w-100"  oninvalid="this.setCustomValidity('Tidak Boleh Kosong')" oninput="this.setCustomValidity('')"  value="" required="" />
  <br><br>
  <button class="btn btn-success">Simpan</button>
 </form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Answer 1

oninput事件只对input/textarea元素有效。对于 select 元素，应使用 onchange 代替。 onchange 事件在元素失去焦点并具有更改的值时发生。

如下更新 select 以使用 onchange 将正确触发事件。

  <select  class="select w-100" oninvalid="this.setCustomValidity('Tidak Boleh Kosong')" onchange="this.setCustomValidity('')"  required="" >

select2 required oninvalid custom text 不起作用

select2 required oninvalid custom text not working

javascript

html

css

jquery-select2