التحقق من صحة مربع حوار jQuery UI دون استخدام علامات <form>

Question

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>

هذا يعمل بشكل رائع.عندما أنقل النموذج إلى قسم مربع الحوار الخاص بي، افتح مربع الحوار، ثم انقر فوق الارتباط الذي يُرجعه صحيحًا، لا يهم.

هل هناك أي طريقة لاستخدام هذا البرنامج الإضافي للتحقق من صحة jquery القاتل دون الحاجة إلى استخدام ملف <form> بطاقة شعار؟أم أن هناك طريقة أفضل للقيام بذلك بنجاح؟

Answer 1

في حالة شخص آخر يأتي عبر هذا الحوار مسج-UI لا إلحاق إلى النموذج، فإنه يلحق قبل </body>، وبالتالي فإن العناصر للتحقق من صحة وخارج القسم <form></form>:

ولحل هذه المشكلة، مجرد توجيه الحوار للانتقال نفسها داخل النموذج عند إنشائه، مثل هذا:

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

Answer 2

ويمكنك استخدام valitidy مسج المساعد

وجافا سكريبت

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

Answer 3

وحاول إعطاء النموذج الخاص بك على الهوية مثل "myform".

وبعد ذلك حاول إضافة هذه الدعوة إلى الحدث onclick من مرساة clicktest الخاص بك:

وعند _ النقر = "العودة (. $ (" # myform ") صحة () شكل ())؛ '

وبدلا من القيام التحقق من الصحة في document.ready.

Answer 4

عملت

ونيك متسول حل بالنسبة لي، ومع ذلك فإنه لا يعمل بشكل كامل لIE7.

وهناك خلل في IE7 حيث أنها لا تحترم مؤشر ض لعناصر متداخلة. لذلك، إذا قمت بنقل الأم في مربع الحوار في شكل من الأشكال، وتراكب يكون على الحوار، ومنع المستخدم من التفاعل مع الحوار. إصلاح لIE7 هو وضع مؤشر ض تراكب ل-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');
}

وشكرا، غاري

Answer 5

قد يكون هذا أو لا يكون ذا صلة ولكن هذه كانت مشكلتي وحلها:

واجهت نفس المشكلة تمامًا، عندما فتحت مربع الحوار، تم استبدال علامة "النموذج" الخاصة بي بعلامة "div".

كان هذا لأنني وضعت مربع الحوار في عنصر نموذج مفتوح بالفعل (من الواضح أنه لا يمكن أن يكون لديك نموذج داخل النموذج)

لا تفعل ما فعلت :)

<form>
    <form>

    </form>
</form>

Answer 6

هل حاولت الالتفاف على شكل حول شعبة بدلا (وفقا لمواصفات W3C لا يسمح به النموذج لتكون عناصر div الداخل).

ودون إعادة كتابة البرنامج المساعد وأنا لا أرى وسيلة سهلة لماذا للقيام بذلك دون عنصر نموذج.

Answer 7

ولقد قررت الذهاب مع هذا مسج التحقق من صحة البرنامج المساعد و يكتب لي البرنامج المساعد الخاص حول التعليمات البرمجية الموجودة.

Answer 8

وأعرف أن هذا السؤال هو القديم، ولكن جئت عبر هذه المشكلة أيضا، لذلك أنا نشر بلدي حل.

إذا كنت تريد أن تبقي مسج التحقق من صحة البرنامج المساعد (الذي يبدو أفضل خيار) ولا تريد نقل الحوار حول مثل اقترح نيك متسول، يمكنك ببساطة إضافة هذا إلى العلامة <form>:

onsubmit="return false;"

وهذا سيمنع النموذج من تقديمه من أي وقت مضى. إذا كنت بحاجة إلى تقديمها في بعض الحالات الخاصة، وتغيير هذه القيمة عودة عند الحاجة.

Answer 9

ونرى هذا التصحيح إلى jQuery.validationEngine شعبية للسماح علامات غير شكل هدفا التحقق من الصحة.

https://github.com/posabsolute/jQuery-Validation-Engine/ سحب / 101

وإذا وجدت هذه قيمتها في حين، وترك التعليق ... وحتى الآن فإن المؤلف لا سحب التصحيح.

Answer 10

ولقد أنشئت مؤخرا المساعد لHTML التحقق من صحة النموذج. يمكنك أن تجرب ذلك بنفسك. براشانت-UI-المصادقة

وبناء باستخدام مسج، ويدعم التمهيد ويمكنك تكوينه في طريقك. وهو يدعم أنواع مختلفة من البيانات مثل INT، STRING، NUMERIC، MAX [الصيغة الرقميه]، MIN [الصيغة الرقميه]، البريد الإلكتروني، والأهم من عهدك شفرة جافا سكريبت التحقق من صحة أيضا.

ونأمل أن يساعد،

Answer 11

وأنا استخدم هذا لأنه يعمل في IE8، بناء على طلب asp.net باستخدام مسج 1.11.2 وjQueryValidate 1.13.1:

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