Bootstrap dengan Plugin Validasi jQuery


154

Saya mencoba menambahkan validasi ke formulir saya dengan Plugin Validasi jQuery, tetapi saya mengalami masalah ketika plugin meletakkan pesan kesalahan ketika saya menggunakan grup input.

masalah

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

Kode saya: http://jsfiddle.net/hTPY7/4/


Mewarisi aplikasi dengan Bootstrap 3, tertawa bahwa saya telah menemukan ini dan telah menandainya bertahun-tahun yang lalu ketika saya terakhir kali mewarisi aplikasi dengan Bootstrap 3.
Adrian J. Moreno

Jawaban:


347

untuk kompatibilitas total dengan twitter bootstrap 3, saya perlu mengganti beberapa metode plugin:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Lihat Contoh: http://jsfiddle.net/mapb_1990/hTPY7/7/


1
WOrks hebat, hanya ingin menyebutkan untuk menambahkan $ (elemen) .removeClass (errorClass); ke unhighlight dan $ (elemen) .addClass (errorClass); untuk menyorot jika Anda ingin sukses agar tidak menggunakan kelas bantuan-blok bootstrap
Jay Rizzi

3
Ini berfungsi dengan baik, kecuali untuk satu hal: Pengujian terhadap jQuery Validate 1.11.1 dan memanggil resetForm()validator formulir tidak akan memanggil unhighlightelemen yang tidak valid, sehingga perlu untuk menghapus has-errorkelas dengan tangan saat mengatur ulang formulir. Apa yang saya lakukan adalah memanggil fungsi berikut alih-alih memanggil resetForm()langsung validator :function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
Adrian Lopez

Saya tidak tahu mengapa kode ini tidak berfungsi pada formulir saya :(
Alyssa Reyes

Demi Tuhan itu bekerja seperti pesona! Terima kasih banyak !!! Anda menyelamatkan saya berpotensi satu atau dua jam penelitian.
racl101

1
Jika Anda memiliki tombol radio seperti saran Bootstrap (input radio ditempatkan di dalam label label), Anda akan ingin menambahkan sesuatu seperti ini ke blok jika:else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Elliot Cameron

86

Untuk kompatibilitas penuh dengan Bootstrap 3 saya menambahkan dukungan untuk kelompok input , radio dan kotak centang , yang tidak ada dalam solusi lain.

Pembaruan 10/20/2017 : Saran yang diinspeksi dari jawaban lain dan menambahkan dukungan tambahan untuk markup khusus radio-inline , penempatan kesalahan yang lebih baik untuk sekelompok radio atau kotak centang dan menambahkan dukungan untuk kelas .novalidation kustom untuk mencegah validasi kontrol. Semoga ini bisa membantu dan terima kasih atas sarannya.

Setelah menyertakan plugin validasi tambahkan panggilan berikut:

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

Ini berfungsi untuk semua kelas bentuk Bootstrap 3. Jika Anda menggunakan formulir horizontal, Anda harus menggunakan markup berikut. Ini memastikan bahwa teks blokir bantuan menghargai status validasi ("kesalahan", ...) dari grup-bentuk .

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>

1
Saya men-tweak errorClass: "help-block error-help-block". Saya sudah menggunakan .help-block untuk informasi bantuan reguler, dan ini menimpanya dengan pesan validasi formulir. Menambahkan kelas kedua membuatnya unik dan jadi sekarang menambahkan bukan menimpa pesan bantuan "nyata" saya.
Scott Stafford

Metode Hilight tidak dipanggil
Vlado Pandžić

Halo Vlado, bisakah Anda memberikan beberapa informasi mengapa itu tidak berhasil untuk Anda?
Andreas Krohn

Untuk sekelompok tombol radio, ini akan menambahkan pesan kesalahan di bawah opsi pertama yang terlihat aneh. Anda mungkin ingin mengubah ini untuk memperlakukan tombol radio secara berbeda.
Elliot Cameron

Terima kasih banyak Pak @AndreasKrohn ^ _ ^
Jeancarlo Fontalvo

23

Saya menggunakan formulir yang dirancang hanya dengan Twitter Bootstrap 3. Saya mengatur fungsi default untuk validor dan menjalankan hanya metode validasi dengan aturan. Saya menggunakan Ikon dari FontAweSome, tetapi Anda dapat menggunakan Glyphicons seperti pada contoh doc.

masukkan deskripsi gambar di sini

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        }
    }
});

Selesai Setelah menjalankan fungsi validasi:

$("#default-register-user").validate({
    rules: {
        'login': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        'email': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        'password': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        'confirmpassword': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

Contoh JSFiddle


1
Akan menyenangkan untuk memiliki JSFiddle untuk ini
kofifus

Bisakah Anda memposting HTML yang Anda gunakan untuk tangkapan layar? Contoh biola tidak memiliki pesan kesalahan bergaya merah atau ikon. Terima kasih!
Christopher Francisco

Christopher Francisco, saya memperbarui contoh JSFiddle dan menambahkan font css mengagumkan.
DARK_DIESEL

Hai solusi hebat! Bagaimana Anda mengedit ini sehingga hanya bidang yang memiliki aturan yang menunjukkan pesan berhasil atau gagal? Benar kode Anda membuat semua bidang menampilkan css, terlepas dari ada aturan atau tidak
Michael Smith

Solusinya adalah menambahkan: 'abaikan: ".ignore,: hidden"' tepat di atas aturan. Kemudian tambahkan saja kelas 'abaikan' ke semua bidang yang tidak Anda inginkan divalidasi
Michael Smith

10

Menambahkan ke jawaban Miguel Borges di atas Anda dapat memberikan umpan balik keberhasilan hijau kepada pengguna dengan menambahkan baris berikut dalam blok kode highlight / unhighlight.

    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

8

ini adalah solusi yang Anda butuhkan, Anda dapat menggunakan errorPlacementmetode ini untuk mengganti tempat untuk meletakkan pesan kesalahan

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

ini bekerja untuk saya seperti sulap. Bersulang


error.insertAfter('.form-group');letakkan kesalahan di semua .form-group. tetapi itu menunjukkan saya ide. terima kasih
Miguel Borges

5

untuk bootstrap 4 ini bekerja dengan saya bagus

    $.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    },
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

berharap ini akan membantu!


Ini bekerja di luar kotak dengan sangat baik! Satu-satunya yang saya tambahkan adalahvalidClass: 'valid-feedback'
Simon Zyx

Terima kasih, ini berhasil bagi saya untuk Bootstrap 4 dengan validClass: 'valid-feedback'.
Zaki Mohammed

4

Inilah yang saya gunakan saat menambahkan validasi ke formulir:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

Ini berfungsi untuk saya untuk gaya Bootstrap 3 saat menggunakan pustaka validasi jquery.


3

Saya menggunakan ini untuk radio:

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

dengan cara ini kesalahan ditampilkan di bawah opsi radio terakhir.


Jawabannya sangat sederhana, terima kasih - baru saja memasukkan klausa tipe tambahan ke dalam logika kesalahan penempatan yang ada
theotherdy

3

Saya tahu pertanyaan ini untuk Bootstrap 3, tetapi karena beberapa pertanyaan terkait Bootstrap 4 diarahkan ke yang ini sebagai duplikat, berikut cuplikan Bootstrap 4 yang kompatibel:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-danger');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-danger');
    },
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if(element.prop('type') === 'checkbox') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

Beberapa perbedaan adalah:

  • Penggunaan kelas has-dangerbukanhas-error
  • Radio dan centang kotak kesalahan yang lebih baik

Bootstrap 4 tidak lagi memiliki .has-*kelas. getbootstrap.com/docs/4.3/migration/#forms-1
Fred

2

Untuk bootstrap 4 beta ada beberapa perubahan besar antara versi alpha dan beta dari bootstrap (dan juga bootstrap 3), esp. dalam hal form validasi.

Pertama, untuk menempatkan ikon dengan benar Anda harus menambahkan gaya yang sama dengan apa yang ada di bootstrap 3 dan tidak lagi di bootstrap 4 beta ... inilah yang saya gunakan

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

Kelas-kelas juga telah berubah karena beta menggunakan 'status' kontrol daripada kelas-kelas yang tidak dipantulkan oleh kode yang Anda posting, jadi kode di atas Anda mungkin tidak berfungsi. Bagaimanapun, Anda harus menambahkan kelas 'sudah divalidasi' ke formulir baik dalam keberhasilan atau sorot / buka kembali panggilan balik

$(element).closest('form').addClass('was-validated');

Saya juga akan merekomendasikan menggunakan elemen dan kelas baru untuk teks bantuan kontrol formulir

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

1

Ini membentuk bidang

 $("#form_questionario").validate({
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertBefore(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                // Specify the validation rules
                rules: {
                        'campo1[]': 'required',
                        'campo2[]': 'required',
                        'campo3[]': 'required',
                        'campo4[]': 'required',
                        'campo5[]': 'required'
                        },

                submitHandler: function (form) {
                    form.submit();
                }
            });

1

tambahkan radio-inline fix ke https://stackoverflow.com/a/18754780/966181 ini

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Sederhana, sangat membantu. Terima kasih.
Chofoteddy

0

Jawaban DARK_DIESEL bekerja sangat baik untuk saya; inilah kode untuk siapa saja yang menginginkan yang setara menggunakan glyphicons:

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
        }
    }
});

0

Coba gunakan kode contoh ini. Menggunakan plugin validasi Jquery dan metode tambahan. Ini adalah kode kerja untuk proyek saya. Semoga ini bisa membantu Anda

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
	  //on key up validation
	  onkeyup: function(element) {
      $(element).valid(); 
    },  
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
.error {
  color: red;
  margin-left: 5px;
  font-size:15px;
}
<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>


-1

Opsi lain adalah menempatkan wadah kesalahan di luar grup formulir Anda sebelumnya. Validator kemudian akan menggunakannya jika perlu.

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.