32

http://bassistance.de/jquery-plugins/jquery-plugin-validation/は、そこにある最高のjquery検証プラグインのようです。ただし、jQueryUIダイアログでは機能しないようです。

このコードは、ダイアログ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に移動し、ダイアログを開いてリンクをクリックすると、trueが返され、ブエノは返されません。

<form>タグを使用せずにこのキラーjquery検証プラグインを使用する方法はありますか？それとも、これを成功させるためのさらに良い方法はありますか？

4

11 に答える 11

33

他の誰かがこれに遭遇した場合、jQuery-UI ダイアログはフォームに追加されず、 の直前に追加される</body>ため、検証する要素は<form></form>セクションの外にあります。

これを解決するには、次のように、ダイアログをフォームの作成時にフォーム内で移動するように指示します。

$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));
于 2010-01-26T19:48:38.820 に答える
3

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");       
            }
        }
   });
})
于 2009-10-14T17:23:01.310 に答える
1

これは関連する場合と関連しない場合がありますが、これは私の問題と解決策でした:

ダイアログを開くと、まったく同じ問題が発生しました。「フォーム」タグが「div」タグに置き換えられました。

これは、既に開いているフォーム要素にダイアログを配置したためです (明らかに、フォーム内にフォームを含めることはできません)。

私がしたことをしないでください:)

<form>
    <form>

    </form>
</form>
于 2012-11-01T14:50:09.097 に答える
1

Nick Craver ソリューションは私にとってはうまくいきましたが、IE7 では完全には機能しません。

ネストされた要素の z-index を尊重しない IE7 のバグがあります。したがって、ダイアログの親をフォームに移動すると、オーバーレイがダイアログの上に表示され、ユーザーがダイアログを操作できなくなります。IE7 の修正は、オーバーレイの z-index を -1 に設定し、オーバーレイ要素を複製して、ダイアログで行ったのと同じようにフォームに追加することです。次に、ダイアログのクローズ イベントで、複製されたオーバーレイを削除します。 IE7 Z-Index レイヤー化の問題

Web サイトのレイアウトによっては、オーバーレイを移動するだけで、クローンを作成する必要がない場合があります。私のウェブサイトのレイアウトには左右の余白があり、領域全体をカバーするオーバーレイが必要だったので、それを複製する必要がありました。以下は私がしたことの例です：

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

ありがとう、ギャリー

于 2011-09-12T15:31:59.220 に答える
1

フォームに「myform」などの ID を付けてみてください。

次に、この呼び出しを clicktest アンカーの onclick イベントに追加してみてください:

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

document.ready で検証を行う代わりに。

于 2009-01-28T22:52:50.397 に答える
0

この質問は古いことは知っていますが、この問題にも遭遇したので、解決策を投稿しています。

jQuery 検証プラグイン (これが最良の選択と思われます) を保持したいが、Nick Craver が提案したようにダイアログを移動したくない場合は、これを<form>タグに追加するだけです:

onsubmit="return false;"

これにより、フォームが送信されなくなります。特別な状況で送信する必要がある場合は、必要に応じてこの戻り値を変更してください。

于 2010-10-25T17:35:55.377 に答える
0

jQuery 1.11.2およびjQueryValidate 1.13.1を使用するasp.netアプリケーションで、IE8で動作するこれを使用しました。

$('#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
    })
于 2015-01-28T03:23:36.170 に答える
0

代わりに、div の周りにフォームをラップしようとしましたか (W3C 仕様によると、フォーム タグを div 内に置くことは許可されていません)。

プラグインを書き直さないと、フォーム要素なしでこれを行う簡単な理由がわかりません。

于 2009-01-28T22:45:12.547 に答える
0

この jQuery 検証プラグインを使用して、既存のコードに独自のプラグインを作成することにしました。

于 2009-01-28T23:25:56.570 に答える
0

最近、HTML フォーム検証用のプラグインを作成しました。自分で試すことができます。Prashant-UI-バリデーター

Jquery を使用してビルドし、Bootstrap をサポートし、独自の方法で構成できます。INT、STRING、NUMERIC、MAX[Num]、MIN[Num]、EMAIL などのさまざまなデータ型をサポートしており、最も重要なカスタム JavaScript 検証コードもサポートしています。

それが役に立てば幸い、

于 2014-07-02T08:59:27.043 に答える
0

非フォームタグを検証ターゲットとして許可するには、人気のある jQuery.validationEngine へのこのパッチを参照してください。

https://github.com/posabsolute/jQuery-Validation-Engine/pull/101

これが価値があると思われる場合は、コメントを残してください...現在のところ、作者はパッチを取りません。

于 2011-07-14T19:50:25.730 に答える