Bootstrap với Plugin xác thực jQuery

Tôi đang cố gắng thêm xác thực vào biểu mẫu của mình bằng Plugin xác thực jQuery, nhưng tôi gặp vấn đề trong đó plugin đặt thông báo lỗi khi tôi đang sử dụng các nhóm đầu vào.

$('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');
    }
});

Mã của tôi: http://jsfiddle.net/hTPY7/4/

để tương thích hoàn toàn với twitter bootstrap 3, tôi cần ghi đè một số phương thức bổ trợ:

// 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);
        }
    }
});

Xem ví dụ: http://jsfiddle.net/mapb_1990/hTPY7/7/

Để tương thích hoàn toàn với Bootstrap 3, tôi đã thêm hỗ trợ cho nhóm đầu vào , radio và hộp kiểm , điều còn thiếu trong các giải pháp khác.

Cập nhật 20/10/2017 : Đã kiểm tra các đề xuất của các câu trả lời khác và thêm hỗ trợ bổ sung cho đánh dấu đặc biệt của radio-inline , vị trí lỗi tốt hơn cho một nhóm radio hoặc hộp kiểm và thêm hỗ trợ cho lớp .novalidation tùy chỉnh để ngăn xác thực các điều khiển. Hy vọng điều này sẽ giúp và cảm ơn cho những lời đề nghị.

Sau khi bao gồm các plugin xác thực, thêm cuộc gọi sau:

$.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);
        }
    }
});

Điều này hoạt động cho tất cả các lớp mẫu Bootstrap 3. Nếu bạn sử dụng một hình thức ngang, bạn phải sử dụng đánh dấu sau. Điều này đảm bảo rằng văn bản khối trợ giúp tôn trọng các trạng thái xác thực ("có lỗi", ...) của nhóm biểu mẫu .

<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>

Tôi sử dụng các biểu mẫu được thiết kế chỉ với Twitter Bootstrap 3. Tôi đặt các hàm mặc định cho trình xác thực và chỉ chạy phương thức xác thực với các quy tắc. Tôi sử dụng Biểu tượng từ FontAweSome, nhưng bạn có thể sử dụng Glyphicons như trong ví dụ doc.

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>');
        }
    }
});

Làm xong. Sau khi chạy chức năng xác nhận:

$("#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"
        }
    }
});

Ví dụ về JSFiddle

Thêm vào câu trả lời của Miguel Borges ở trên, bạn có thể cung cấp cho người dùng phản hồi thành công màu xanh lá cây bằng cách thêm dòng sau vào khối mã tô sáng / không nổi bật.

    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');
    }

Đây là giải pháp bạn cần, bạn có thể sử dụng errorPlacementphương pháp để ghi đè nơi đặt thông báo lỗi

$('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');
    }
});

nó hoạt động với tôi như ma thuật. Chúc mừng

cho bootstrap 4 công việc này với tôi tốt

    $.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);
        }
    }
});

hy vọng nó sẽ giúp

Đây là những gì tôi sử dụng khi thêm xác nhận vào mẫu:

// 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'
        });

Điều này làm việc cho tôi để tạo kiểu Bootstrap 3 khi sử dụng thư viện xác thực jquery.

Tôi đã sử dụng điều này cho đài phát thanh:

    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);
    }

bằng cách này, lỗi được hiển thị dưới tùy chọn radio cuối cùng.

Tôi biết câu hỏi này dành cho Bootstrap 3, nhưng vì một số câu hỏi liên quan đến Bootstrap 4 được chuyển hướng đến câu hỏi này dưới dạng trùng lặp, đây là đoạn trích tương thích Bootstrap 4:

$.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);
        }
    },
});

Một vài điểm khác biệt là:

• Việc sử dụng lớp has-dangerthay vìhas-error
• Radio và hộp kiểm định vị lỗi tốt hơn

Đối với bootstrap 4 beta là một số thay đổi lớn giữa phiên bản alpha và beta của bootstrap (và cả bootstrap 3), đặc biệt. liên quan đến xác nhận mẫu.

Trước tiên, để đặt các biểu tượng một cách chính xác, bạn sẽ cần thêm kiểu dáng tương đương với bootstrap 3 và không còn trong bootstrap 4 beta ... đây là những gì tôi đang sử dụng

.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;
}

Các lớp cũng đã thay đổi khi beta sử dụng 'trạng thái' của điều khiển thay vì các lớp mà mã được đăng của bạn không phản ánh, vì vậy mã trên của bạn có thể không hoạt động. Dù sao, bạn sẽ cần thêm lớp 'đã được xác thực' vào biểu mẫu trong các cuộc gọi lại thành công hoặc nổi bật / không nổi bật

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

Tôi cũng sẽ khuyên bạn nên sử dụng phần tử và lớp mới cho văn bản trợ giúp điều khiển biểu mẫu

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

Điều này tạo nên các lĩnh vực

 $("#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();
                }
            });

thêm bản sửa lỗi vô tuyến cho https://stackoverflow.com/a/18754780/966181

$.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);
        }
    }
});

Câu trả lời của DARK_DIESEL làm việc rất tốt cho tôi; đây là mã cho bất cứ ai muốn sử dụng glyphicons tương đương:

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>');
        }
    }
});

Hãy thử sử dụng mã mẫu này. Sử dụng plugin xác thực Jquery và các phương pháp bổ sung. Đây là mã làm việc cho dự án của tôi. Hy vọng điều này sẽ giúp bạn

//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>

Một tùy chọn khác là đặt một thùng chứa lỗi bên ngoài nhóm biểu mẫu của bạn trước thời hạn. Trình xác nhận sau đó sẽ sử dụng nó nếu cần thiết.

<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>