select2 required oninvalid custom text not working

Posted 2023-05-07

【中文标题】select2 required oninvalid custom text not working

【英文标题】：

【发布时间】：2022-01-20 04:48:37

【问题描述】：

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

如果我们直接选择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>

【参考方案1】：

oninput 事件仅对输入/文本区域元素有效。对于选择元素 onchange 应改为使用。 onchange 事件在元素失去焦点并且值发生变化时发生。

如下更新选择使用onchange将正确触发事件。

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

【讨论】：

效果很好，谢谢