programing

jQuery 유효성 확인 알림을 위해 트위터 부트스트랩 팝업을 사용하는 방법?

powerit 2023. 10. 15. 18:06
반응형

jQuery 유효성 확인 알림을 위해 트위터 부트스트랩 팝업을 사용하는 방법?

는 부트스트랩을 사용하여 팝오버가 충분히 쉽게 나타나도록 할 수 있고 표준 jQuery validation plugin이나 jQuery validation 엔진을 사용하여 validation을 수행할 수도 있지만 하나를 다른 하나로 피드하는 방법을 알 수 없습니다.

내가 필요한 것은 알림을 표시하고, 메시지와 대상 요소를 팝업에 전달하는 폐쇄를 위해 검증자가 호출하는 후크라고 생각합니다.이것은 일종의 의존성 주사처럼 보입니다.

이론적으로는 괜찮지만, 그 고리가 어디에 있는지, 아니면 검증 엔진에 존재하는지조차 알 수가 없습니다.두 사람 모두 오류 유형(메시지 텍스트가 필요하지도 않습니다)과 관련된 요소만 있으면 배치, 포장지, 스타일에 대한 온갖 정교한 옵션이 포함된 알림 표시에 책임을 지려는 것 같습니다.개별 통지가 아닌 전체 양식에 대한 후크를 찾았습니다.

동적으로 생성된 양식으로 잘 처리하기 때문에 클래스를 사용하여 규칙을 정의하는 검증 시스템을 훨씬 선호합니다.

해결책이나 더 좋은 아이디어 있는 사람?

다음은 실제 사례입니다.

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

enter image description here

부츠트랩 팝오버를 사용하지는 않지만, 정말 보기 좋고 달성하기 쉽습니다.

갱신하다

따라서 팝업 유효성 검사를 수행하려면 다음 코드를 사용할 수 있습니다.

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

당신은 이런 것을 얻습니다.

enter image description here

jsFiddle을 확인해보세요.

요를 .highlight그리고.showErrors jQuery Validator 옵션을 사용하면 부트스트랩 팝업을 트리거하는 사용자 지정 오류 하이라이트를 연결할 수 있습니다.

크리스 풀스토우가 맞았지만, 아직 시간이 좀 걸렸기 때문에 완전한 코드는 다음과 같습니다.

여기에는 오류 시 팝업이 표시되고 기본 오류 레이블이 숨겨집니다.

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

팝업이 설정됩니다.여기서 필요한 건 '수동' 트리거뿐입니다.

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

팝업에 전달된 제목 및 내용 속성이 작동하지 않아 data-content='최소 5자' 및 data-original- title='로 #password 입력에 인라인으로 지정했습니다.잘못된 암호'입니다.양식에 rel= 'popover'도 필요합니다.

이렇게 하면 되지만 선택을 취소하면 팝업이 깜박입니다.어떻게 고쳐야 할지 아세요?

팝업이 이미 존재함에도 불구하고 계속해서 "보여주기"를 시도하는 검증의 "플리커" 문제를 방지하는 Varun Singh의 훌륭한 제안에 대한 후속 조치입니다.오류 상태 배열을 추가하여 오류를 표시하는 요소와 표시되지 않는 요소를 캡처했습니다.매력적으로 작동합니다!

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

jQuery Validation Plugin(버전 1.9.0에서 테스트됨)을 위한 이 jQuery 확장 기능이 효과적입니다.

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

또한 일부 Rails-esk 오류 메시지도 추가됩니다.

저는 부트스트랩의 CSS를 변경하는 것을 선호합니다.jQuery validate의 클래스를 적재적소에 추가했습니다.필드-valid레이션-오류 및 입력-valid레이션-오류

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

이렇게 Bootstrap 2.x와 jQuery Validate 1.9를 사용했습니다.

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});

다음 내용을 확인해 주시기 바랍니다.
- https://gist.github.com/3030983
가장 간단한 것 같아요.

편집

링크의 코드:

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});

많은 분들께 감사드립니다.여기 부트스트랩을 위한 버전이지만 툴팁이 있는 버전이 있습니다.제 생각에는 그것이 팝오버보다 더 우아합니다.그 질문이 팝오버를 위한 질문인 것으로 알고 있으니, 이 이유로 투표를 거부하지 말아주시기 바랍니다.아마 누군가 이런 식으로 좋아할 겁니다.저는 무언가를 찾고 있을 때 스택 오버플로우에 대한 새로운 아이디어를 발견했을 때를 좋아합니다.참고: 양식에 대한 마크업은 필요 없습니다.

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    }); 

제가 이렇게 해냈죠.그러나 validate 스크립트를 2번 변경해야 합니다(여기서 부트스트랩 1.4에 대한 코드를 받고 수정했습니다 - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin-for-twitter-bootstrap/)

확인할 전화:

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

js jquery.validate.js 에서 2 .
1. 이 수정사항 적용 - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
다음(에서 label ) 2뒤 다음(showLabel part성 라벨 part에서 표시)(.addClass(this.settings.errorClass) 추가:가:.addClass("help-inline")
에서 두 하는 방법을 수 validate만, showLabel다 뒤에 .

이것은 트위터 부트스트랩 가이드라인을 준수하기 위해 제가 검증한 것입니다.가 A에에 오류 됩니다.<span class=help-inline>그리고 우리는 외부 용기를 다음과 같이 강조하고 싶습니다.error아니면success:

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}

여기 위의 케니 메이어의 훌륭한 답변에 대한 업데이트가 있습니다.이 토막글에서 다루었던 몇 가지 문제 때문에 이 문제를 해결하지 못했습니다.

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }

원래 포스터에서 부트스트랩 팝업을 표시/숨기기 위해 후크를 요청했기 때문에 이것이 논의와 관련이 있는지 확실하지 않습니다.

간단한 유효성 확인을 찾고 있었는데 팝오버는 문제가 되지 않았습니다.관련 게시물과 구글 검색 결과의 첫 번째 게시물은 이미 이 질문의 중복으로 표시되었습니다.따라서 트위터 부트스트랩과 잘 어울리는 이 뛰어난 @ReactiveRaven의 jqValidation JS, 즉 jqBootstrapValidation JS를 언급하는 것이 타당했습니다.설치하는 데 몇 분밖에 걸리지 않습니다.여기서 다운받으세요.

이것이 가치를 더하길 바랍니다.

tl;dr은 해시 맵을 사용하여 요소의 ID를 저장하고 즉각적인 팝오버를 생성함으로써 명시적인 팝오버를 열거할 필요가 없도록 합니다(제프리 길버트와 케니 마이어의 접근 방식을 매쉬업합니다).

다른 사람들이 언급한 깜박임 문제를 해결하는 나의 의견은 이렇지만 @Jeffrey Gilbert의 답변과는 달리 목록을 사용하지 않습니다 (errorStates) 대신 오류 을 사용합니다.해시 맵 FTW.CS의 모든 문제는 해시 맵으로 해결할 수 있다는 글을 어디선가 읽은 것 같습니다 :)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = element.popover({
          trigger: "manual",
                 placement: "top",
                 content: value.message,
                 template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

이에 대한 아이디어를 올려주신 모든 분들께 감사드립니다.

이것을 확인해보세요: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

JS 대신 부트스트랩 팝업 cs를 사용하는 방법을 보여줍니다. JS 메서드 팝업으로 인해 깜박임 문제가 발생합니다.

팝업에 위의 Kenny Meyer 코드를 사용하는 경우 필드의 내용을 확인하지만 유효한 URL과 같이 필수적인 규칙은 필드를 지울 때 팝업이 사라지지 않도록 주의해야 합니다.해결 방법은 아래 키업을 참조하십시오.더 좋은 해결책이 있는 사람이 있으면 글을 올려주세요.

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }

언급URL : https://stackoverflow.com/questions/8439490/how-to-use-twitter-bootstrap-popovers-for-jquery-validation-notifications

반응형