web-dev-qa-db-ja.com

<form>タグを使用しないjQuery UIダイアログの検証

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に移動してダイアログを開き、リンクをクリックすると、trueが返されます。

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

jqueryvalidationjquery-uijquery-pluginsjquery-validate
32
Josh

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

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

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

valitidy jquery plugin を使用できます

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");       
            }
        }
   });
})
3
Allan Rwakatungu

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

次に、この呼び出しをクリックテストアンカーのonclickイベントに追加してみます。

onclick = 'return（$（ "＃myform"）。validate（）。form（））;'

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

1
iZ.

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

IE7には、ネストされた要素のz-indexを考慮しないバグがあります。したがって、ダイアログの親をフォームに移動すると、オーバーレイがダイアログの上になり、ユーザーがダイアログを操作できなくなります。 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');
}

ありがとう、ギャリー

1
Garry English

これは関連があるかもしれませんし、そうでないかもしれませんが、これは私の問題と解決策でした：

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

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

私がしたことをしないでください：）

<form>
    <form>

    </form>
</form>
1
pleshy

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

$('#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
    })
0
Diana Eneida

代わりにフォームをdivでラップしてみましたか（W3C仕様によると、フォームタグをdiv内に含めることは許可されていません）。

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

0
Jared

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

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

それが役に立てば幸い、

0
prashantchalise

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

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

onsubmit="return false;"

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

0
mdrg

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

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

この価値があると思ったら、コメントを残してください...現在のところ、作者はパッチをプルしません。

0
user406905

私は このjQuery検証プラグイン を使用して、既存のコードの周りに独自のプラグインを記述することにしました。

0
Josh