jQuery 유효성 검사 플러그인이있는 부트 스트랩

jQuery Validation Plugin을 사용하여 양식에 유효성 검사를 추가하려고하는데 입력 그룹을 사용할 때 플러그인에서 오류 메시지를 표시하는 데 문제가 있습니다.

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

내 코드 : http://jsfiddle.net/hTPY7/4/

트위터 부트 스트랩 3과의 완벽한 호환성을 위해 일부 플러그인 메소드를 재정의해야합니다.

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

예를 참조하십시오 : http://jsfiddle.net/mapb_1990/hTPY7/7/

Bootstrap 3과의 완벽한 호환성을 위해 다른 솔루션에서 누락 된 input-group , radio 및 checkbox 지원을 추가했습니다 .

2017 년 10 월 20 일 업데이트 : 다른 답변에 대한 제안을 검사하고 라디오 인라인 의 특수 마크 업에 대한 추가 지원 , 라디오 또는 확인란 그룹에 대한 오류 배치 개선 및 사용자 지정 .novalidation 지원 추가 컨트롤의 유효성 검사를 방지하기 위해 클래스에 . 이것이 도움이되기를 바랍니다. 제안에 감사드립니다.

유효성 검사 플러그인을 포함시킨 후 다음 호출을 추가하십시오.

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

이것은 모든 Bootstrap 3 폼 클래스에서 작동합니다. 가로 형식을 사용하는 경우 다음 마크 업을 사용해야합니다. 이렇게하면 도움말 차단 텍스트가 form-group 의 유효성 검사 상태 ( "has-error", ...)를 준수 합니다.

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

Twitter Bootstrap 3으로 만 설계된 양식을 사용합니다. 유효성 검사기의 기본 기능을 설정하고 규칙을 사용하여 유효성 검사 방법 만 실행합니다. FontAweSome의 Icons를 사용하지만 문서 예제에서와 같이 Glyphicon을 사용할 수 있습니다.

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

끝난. 유효성 검사 기능을 실행 한 후 :

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

JSFiddle 예제

위의 Miguel Borges 답변에 추가하면 강조 표시 / 강조 표시 해제 코드 블록에 다음 줄을 추가하여 녹색 성공 피드백을 사용자에게 제공 할 수 있습니다.

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

이것은 필요한 솔루션입니다. errorPlacement메서드를 사용 하여 오류 메시지를 넣을 위치를 재정 의 할 수 있습니다

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

그것은 마술처럼 나를 위해 작동합니다. 건배

부트 스트랩 4의 경우이 작업은 좋았습니다.

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

그것이 도움이되기를 바랍니다!

양식에 유효성 검사를 추가 할 때 사용하는 내용은 다음과 같습니다.

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

이것은 jquery 유효성 검사 라이브러리를 사용할 때 Bootstrap 3 스타일링에 효과적이었습니다.

나는 이것을 라디오에 사용했다.

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

이렇게하면 마지막 라디오 옵션 아래에 오류가 표시됩니다.

이 질문은 Bootstrap 3에 대한 것이지만 일부 Bootstrap 4 관련 질문 이이 질문으로 복제됨에 따라 스 니펫 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);
        }
    },
});

몇 가지 차이점은 다음과 같습니다.

• has-danger대신에 클래스 사용has-error
• 오류 포지셔닝 라디오 및 확인란 개선

부트 스트랩 4 베타의 경우 부트 스트랩의 알파 버전과 베타 버전 (및 부트 스트랩 3) 사이의 큰 변화가있었습니다. 양식 유효성 검사와 관련하여

먼저 아이콘을 올바르게 배치하려면 부트 스트랩 3에 있던 것과 더 이상 부트 스트랩 4 베타에없는 것과 같은 스타일을 추가해야합니다 ... 여기에 사용중인 것이 있습니다

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

게시 된 코드에 반영되지 않은 클래스가 아닌 베타가 컨트롤의 '상태'를 사용함에 따라 클래스도 변경되었으므로 위의 코드가 작동하지 않을 수 있습니다. 어쨌든, 성공 또는 강조 표시 / 강조 표시 취소 중 하나의 양식에 'was-validated'클래스를 추가해야합니다.

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

양식 컨트롤 도움말 텍스트에 새 요소와 클래스를 사용하는 것이 좋습니다.

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

이것은 필드를 구성

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

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

DARK_DIESEL의 답변은 저에게 큰 도움이되었습니다. 글리프 아이콘을 사용하여 동등한 것을 원하는 사람을위한 코드는 다음과 같습니다.

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

이 샘플 코드를 사용해보십시오. Jquery 유효성 검사 플러그인 및 추가 방법 사용 이것은 내 프로젝트의 작업 코드입니다. 희망이 당신을 도울

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

다른 옵션은 오류 그룹을 양식 그룹 외부에 미리 배치하는 것입니다. 그런 다음 유효성 검사기는 필요한 경우이를 사용합니다.

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