태그를 사용하지 않고 jQuery UI 대화 상자 검증

StackOverflow https://stackoverflow.com/questions/489722

문제

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 최고의 jQuery 유효성 검사 플러그인으로 보입니다. 그래도 jQuery UI 대화 상자에서 작동하지 않는 것 같습니다.

이 코드는 대화 상자 DIV 외부에서 작동합니다.

<script type="text/javascript">
$(document).ready(function() {
     $("form").validate();
     $("a").bind("click", function() { alert($("form").valid()); });
});
</script>

<form method="get" action="">
   <p>
     Name
     <input id="name" name="name" class="required" minlength="2" />
   </p>
   <p>
     E-Mail
     <input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <a href="#" id="clickTest">Click</a>
</form>

이것은 훌륭합니다. 양식을 대화 DIV로 이동하고 대화 상자를 열고 Bueno가없는 True를 반환하는 링크를 클릭합니다.

이 킬러 jquery 검증 플러그인을 사용하지 않고 사용하는 방법이 있습니까? <form> 꼬리표? 아니면이 작업을 성공적으로 수행하는 더 나은 방법이 있습니까?

도움이 되었습니까?

해결책

다른 사람이 이것을 발견하는 경우 jQuery-UI 대화 상자가 양식에 추가되지 않으며 직전에 추가됩니다. </body>, 검증 할 요소는 외부에 있습니다 <form></form> 부분:

이것을 해결하려면 다음과 같이 대화 할 때 대화 상자를 양식 내부로 이동하도록 지시하십시오.

$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));

다른 팁

당신은 사용할 수 있습니다 Valitidy JQuery 플러그인

JavaScript 

function validateForm(){  
    $.validity.start();   
    // Required:  
    $("#recipientFirstName").require();  
    var result = $.validity.end();  
    return result.valid;  
}

$(document).ready(function() { 
    $('#dialog').dialog({
        autoOpen: false,   
        title: 'My title', 
        width: 600,  
        modal: true,  
        buttons: {  
            "Ok": function() {   
                if(validateForm()) {
                    saveOrder();
                    $(".validity-tooltip").css("display", "none"); 
                    $(this).dialog("close");  
                }
            },
            "Cancel": function() {
                // The following line was added to
                // hide the tool-tips programmatically:          
                $(".validity-tooltip").css("display", "none");
                $(this).dialog("close");       
            }
        }
   });
})

"myform"과 같은 ID를 양식에 제공해보십시오.

그런 다음 클릭 테스트 앵커의 Onclick 이벤트 에이 호출을 추가하십시오.

onclick = 'return ($ ( "#myform"). validate (). form ());'

문서에서 유효성 검사를하는 대신 준비.

Nick Craver Solution은 저에게 효과가 있었지만 IE7에는 완전히 작동하지 않습니다.

IE7에는 중첩 된 요소에 대해 z-index를 존중하지 않는 버그가 있습니다. 따라서 대화 상자의 상위를 양식으로 옮기면 오버레이가 대화 상자를 넘어서 사용자가 대화 상자와 상호 작용하지 못하게됩니다. IE7에 대한 수정은 오버레이의 Z -INDEX를 -1로 설정 한 다음 오버레이 요소를 복제하고 대화 상자와 마찬가지로 양식에 추가하는 것입니다. 그런 다음 대화 상자의 가까운 이벤트에서 복제 된 오버레이를 제거하십시오.IE7 Z- 인덱스 레이어링 문제

웹 사이트 레이아웃에 따라 오버레이를 움직일 수 있으며 복제 할 필요가 없습니다. 내 웹 사이트 레이아웃에 왼쪽과 오른쪽 여백이 있었기 때문에 복제해야했으며 전체 영역을 덮기 위해 오버레이가 필요했습니다. 아래는 내가 한 일의 예입니다.

var $dialog = $('#myDialog');
var $form = $dialog.parents('form:first');

$dialog.dialog({
    autoOpen: false,
    title: 'My Dialog',
    minWidth: 450,
    minHeight: 200,
    modal: true,
    position: ['center', 'center'],
    close: function () {
        // IE7 BUG: Needed to add an additional overload because of the z-index bug in IE7.
        $('.ui-widget-overlay-ie7fix:first').remove();
    },
    buttons: dialogButtons
});

$form.prepend($dialog.parent());
$dialog.dialog('open');

if ($.browser.msie && $.browser.version.slice(0, 1) == "7") {
    var $overlay = $('body .ui-widget-overlay:first');
    $form.prepend($overlay.clone().addClass('ui-widget-overlay-ie7fix'));
    $overlay.css('z-index', '-1');
}

고마워, 가리

이것은 관련이 있거나 관련이 없지만 이것은 내 문제와 해결책이었습니다.

대화 상자를 열었을 때 "양식"태그가 "div", 태그로 대체되었습니다.

대화 상자를 이미 열린 양식 요소에 배치했기 때문입니다 (분명히 양식 내에 양식을 가질 수는 없습니다).

내가 한 일을하지 마십시오 :)

<form>
    <form>

    </form>
</form>

대신 DIV 주위에 양식을 포장하려고 했습니까 (W3C 사양 양식 태그에 따라 DIV 내부에있을 수 없습니다.)

플러그인을 다시 작성하지 않으면 양식 요소 없이이 작업을 수행하는 이유는 쉽지 않습니다.

나는 함께 가기로 결정했다 이 jQuery 유효성 검사 플러그인 기존 코드에 내 자신의 플러그인을 작성하십시오.

이 질문이 오래되었음을 알고 있지만이 문제도 발견 했으므로 솔루션을 게시하고 있습니다.

JQuery Validation 플러그인을 유지하려면 (최선의 선택으로 보임) Nick Craver가 제안한 것처럼 대화 상자를 이동하고 싶지 않다면 간단히 추가 할 수 있습니다. <form> 꼬리표:

onsubmit="return false;"

이렇게하면 양식이 제출되는 것을 방지 할 수 있습니다. 특별한 상황에서 제출 해야하는 경우 필요할 때이 반품 값을 변경하십시오.

이 패치는 인기있는 jQuery.validationEngine을 참조하여 비 형식 태그를 유효성 검사 대상으로 허용합니다.

https://github.com/posabsolute/jquery-validation-engine/pull/101

이 가치를 찾으면 의견을 남겨주세요 ... 현재로서는 저자가 패치를 당기지 않을 것입니다.

최근에 HTML 양식 검증 용 플러그인을 만들었습니다. 직접 시도해 볼 수 있습니다.Prashant-ui-validator

jQuery를 사용하여 빌드하고 부트 스트랩을 지원하며이를 구성 할 수 있습니다. Int, String, Numeric, Max [Num], Min [Num], 이메일 및 가장 중요한 사용자 정의 JavaScript 유효성 검증 코드와 같은 다양한 데이터 유형을 지원합니다.

도움이되기를 바랍니다.

jQuery 1.11.2 및 jQueryValidate 1.13.1을 사용하여 ASP.NET 응용 프로그램에서 IET를 사용했습니다.

$('#lnz_NuevoLink').click(function () {
        $("#lnz_AgregarDiv").dialog("open").parent().appendTo(jQuery("#aspnetForm"));   //Add the dialog to the form     
        $("#lnz_AgregarDiv").parent().attr('style', 'z-index: 101');                //To avoid the modal
        $("#lnz_AgregarDiv").dialog("option", "position", { my: "center", at: "center", of: window }); //To center the dialog
    })
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top