Bagaimana cara memeriksa apakah modal bootstrap terbuka, jadi saya bisa menggunakan jquery validate

111

saya perlu membuat validasi hanya jika sebuah modal terbuka, karena jika saya membukanya, lalu saya menutupnya, dan saya menekan tombol yang membuka modal itu tidak berfungsi karena membuat validasi jquery, tetapi tidak ditampilkan karena modal ditutup.

Jadi saya ingin mengiklankan jquery jika modal terbuka jadi saya melakukan validasi, apakah ini mungkin?

<script>
$(document).ready(function(){

var validator =$('#form1').validate(
 {
  ignore: "",
  rules: {

usu_login: {
  required: true
},
usu_password: {
  required: true
},
usu_email: {
  required: true
},
usu_nombre1: {
  required: true
},
usu_apellido1: {
  required: true
},
usu_fecha_nac: {
  required: true
},
usu_cedula: {
  required: true
},
usu_telefono1: {
  required: true
},
rol_id: {
  required: true
},
dependencia_id: {
  required: true
},
  },

  highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
        if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
        {
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
            {
                var id = $(tab).attr("id");

                $('a[href="#' + id + '"]').tab('show');
            });
        }
  },
  unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
  }
 });

}); // end document.ready

</script>
jquery validation twitter-bootstrap modal-dialog Mariana Hernandez
sumber

Jawaban:

183

Untuk menghindari kondisi balapan yang disebutkan @GregPettit, seseorang dapat menggunakan:

($("element").data('bs.modal') || {})._isShown    // Bootstrap 4
($("element").data('bs.modal') || {}).isShown     // Bootstrap <= 3

seperti yang dibahas di Twitter Bootstrap Modal - IsShown .

Ketika modal belum dibuka, .data('bs.modal')kembali undefined, maka || {}- yang akan membuat isShownnilai (salah) undefined. Jika Anda menyukai ketegasan, orang bisa melakukannya($("element").data('bs.modal') || {isShown: false}).isShown

Brian M. Hunt
sumber
2
Ada masalah dengan ini, jika modal tidak terbuka, Anda akan mendapatkan 'tidak ditentukan' dari $ ("elemen"). Data ('bs.modal')
Flezcano
._isShown bekerja untuk saya, saya menggunakan bootstrap 4 alpha
Iftikar Urrhman Khan
8
Di Bootstrap 4 _isShown, bukan isShown.
elquimista
Saya hanya memeriksa apakah modal memiliki kelas 'menunjukkan' (bootstrap 4) - berfungsi sesuai kebutuhan. Apakah memeriksa _isShown lebih baik dalam beberapa hal?
trainoasis
Bisakah Anda membagikan solusi dalam skrip ketikan?
Surajit Biswas
80

Kamu bisa memakai

$('#myModal').hasClass('in');

Bootstrap menambahkan inkelas saat modal terbuka dan menghapusnya saat ditutup

tleef
sumber
4
Ini ternyata agak rapuh dengan opsi fade dan klik cepat atau memicu modal melalui panggilan Ajax. Penundaan waktu pada fade dapat menciptakan kondisi balapan. Namun, cara yang berguna untuk menghubungkannya saat konten statis dan model hanya muncul selama interaksi pengguna!
Greg Pettit
Cara teraman dan paling pasti untuk menghindari kondisi balapan pada modal Bootstrap adalah dengan berlangganan event shown.bs.modalatau nya hidden.bs.modal. Dengan begitu, saat kode peristiwa Anda mendapatkan kendali, Anda sangat yakin bahwa dialog tidak dalam keadaan sensitif.
Eric Lloyd
Apakah Valid di Bootstrap versi 4?
Mahdi Alkhatib
1
@MahdiAlkhatib Tidak, ini tidak berfungsi di Bootstrap 4. Anda dapat menggantinya 'in'dengan 'show'untuk Bootstrap 4.
Philip Stratford
61

Anda juga bisa langsung menggunakan jQuery.

$('#myModal').is(':visible');
alexoviedo999
sumber
1
Seperti saat jawabannya sederhana. Jika menggunakan ajax, saya menggunakan ini di onbefore dan memeriksa dan mengembalikan false, dengan cara ini juga mencegah beberapa panggilan ke server. Terima kasih!
eaglei22
Jawaban yang diterima mengembalikan tidak ditentukan atau nol. Ini bekerja dengan sempurna. Terima kasih!
Alex
8

Periksa apakah modal terbuka

$('.modal:visible').length && $('body').hasClass('modal-open')

Untuk melampirkan pendengar acara

$(document).on('show.bs.modal', '.modal', function () {
    // run your validation... ( or shown.bs.modal )
});
Raja Khoury
sumber
6

Bootstrap 2, 3 Periksa apakah ada modal yang terbuka di halaman:

if($('.modal.in').length)

versi yang kompatibel Bootstrap 2, 3, 4+

if($('.modal.in, .modal.show').length)

Hanya Bootstrap 4+

if($('.modal.show').length)

sumber
3
Saya menggunakan Bootstrap 4.1.3dan itu menambahkan showkelas, bukan in.
Arif Hussain
4 
$("element").data('bs.modal').isShown

tidak akan berfungsi jika modal belum ditampilkan sebelumnya. Anda perlu menambahkan ketentuan tambahan:

$("element").data('bs.modal')

jadi jawabannya dengan memperhatikan kemunculan pertama:

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
... 
}
joanfihu
sumber
3

Anda juga bisa menggunakan

$('#myModal').hasClass('show');
Bhavesh Lalwani
sumber
0

Pada bootstrap-modal.js v2.2.0:

( $('element').data('modal') || {}).isShown
Ricardo
sumber
Jawaban diuji, kredit asli untuk jawaban yang diterima
Ricardo
2
Mengapa ini tidak disukai? Persis itulah yang saya butuhkan
Rachel Edge
0

Mengapa mempersulit hal-hal ketika itu bisa dilakukan dengan jQuery sederhana seperti berikut.

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
Sokka Boomerang
sumber