Aquí tengo la option de select usando select2 , funciona bien, pero aquí quiero que se required select2 con custom text oninvalid y cuando selecciono y guardo con el formulario de botón, pero sigue mostrando texto no válido en el botón y no puedo guardar
Esto funciona si seleccionamos directamente select2 y completamos la entrada y guardamos directamente
Pero no funciona cuando presiono el button al principio y select el último select2 , seguirá mostrando el texto y ese es el problema, ¿hay alguna forma de solucionarlo?
$(".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>El evento oninput solo es válido para elementos input/textarea. Para seleccionar elementos, se debe usar onchange en su lugar. El evento onchange ocurre cuando el elemento pierde el foco y cambia de valor.
Actualizar la selección para usar onchange de la siguiente manera activará correctamente el evento.
<select class="select w-100" oninvalid="this.setCustomValidity('Tidak Boleh Kosong')" onchange="this.setCustomValidity('')" required="" >