2009-01-28 35 views
32

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ का उपयोग किए बिना jQuery UI संवाद सत्यापन, वहां पर सबसे अच्छी jquery सत्यापन प्लगइन दिखता है। मुझे लगता है कि यह jQuery यूआई संवाद में काम नहीं कर रहा है।<form> टैग

इस कोड संवाद 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 नहीं।

क्या <form> टैग का उपयोग किए बिना इस हत्यारा jquery सत्यापन प्लगइन का उपयोग करने का कोई तरीका है? या क्या यह सफलतापूर्वक करने का एक बेहतर तरीका है?

उत्तर

32

मामले में किसी और को इस भर आता है, jQuery-यूआई संवाद रूप से अटैचमेंट नहीं है, यह सिर्फ </body> से पहले जोड़ देती है, तो मान्य करने के लिए तत्व <form></form> से बाहर हैं अनुभाग:

इसे हल करने के लिए, जब आप इसे बनाते हैं तो स्वयं को फ़ॉर्म के अंदर ले जाने के लिए संवाद को निर्देशित करें, जैसे:

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

यह पूरी तरह से काम नहीं करता है आईई 7 में। अतिरिक्त चरणों के लिए मेरा जवाब देखें। –

+0

मुझे लगता है कि अनुसंधान के दौरान कई बार इस जवाब में आया, इससे पहले कि मुझे एहसास हुआ कि इसका क्या अर्थ है। https://devio.wordpress.com/2012/07/16/validating-a-jquery-dialog-using-jquery- validate-in-asp-net/ धन्यवाद! – devio

+2

नया संवाद (jquery 1.10) में एक ऐपेंड विकल्प है: $ ("। चयनकर्ता") .dialog ({appendTo: "form: first"}); – EliSherer

0

मैं एक आसान क्यों कर के नहीं दिख रहा है (W3C कल्पना फ़ॉर्म टैग के अंदर divs होने की अनुमति नहीं है के अनुसार।) आप अपने div चारों ओर प्रपत्र लपेटकर की कोशिश की बजाय है

प्लगइन को फिर से लिखकर बिना यह एक फार्म तत्व के बिना।

1

अपना फॉर्म "myform" जैसी आईडी देने का प्रयास करें।

फिर अपने clicktest लंगर की onclick घटना को यह कॉल जोड़ने का प्रयास करें:

onclick = 'वापसी (। $ ("# MyForm") को मान्य() प्रपत्र()।);'

दस्तावेज़ में सत्यापन करने के बजाय। पहले से ही।

0

मैंने this jQuery validation plugin के साथ जाने का निर्णय लिया है और मौजूदा कोड के चारों ओर अपना खुद का प्लगइन लिखने का फैसला किया है।

3

आप उपयोग कर सकते हैं valitidy jquery plugin

जावास्क्रिप्ट

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

मुझे पता है कि यह प्रश्न पुराना है, लेकिन मैं भी इस समस्या में आया, इसलिए मैं अपना समाधान पोस्ट कर रहा हूं।

आप jQuery सत्यापन प्लगइन रखने (जो सबसे अच्छा विकल्प लगता है) और संवाद चारों ओर ले जाने की तरह निक Craver सुझाव दिया, तो आप बस <form> टैग में यह जोड़ सकते हैं नहीं करना चाहती चाहते हैं:

onsubmit="return false;" 

यह फॉर्म को कभी भी सबमिट होने से रोक देगा। यदि आपको इसे कुछ विशेष परिस्थितियों में जमा करने की आवश्यकता है, तो आवश्यकता होने पर इस वापसी मूल्य को बदलें।

0

गैर-फॉर्म टैग को सत्यापन लक्ष्य के रूप में अनुमति देने के लिए लोकप्रिय jQuery.validationEngine पर यह पैच देखें।

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

अगर आप इस लायक है, जबकि मिल जाए, एक टिप्पणी छोड़ ...अब तक लेखक पैच खींच नहीं पाएगा।

+0

मुझे इस पृष्ठ में त्रुटि चौड़ाई मिल रही है: विकल्प अपरिभाषित [इस त्रुटि को तोड़ें] विकल्प.इस त्रुटि = झूठी; – onder

1

निक क्रेवर समाधान मेरे लिए काम करता है, हालांकि यह आईई 7 के लिए पूरी तरह से काम नहीं करता है।

आईई 7 में एक बग है जहां यह नेस्टेड तत्वों के लिए जेड-इंडेक्स का सम्मान नहीं करता है; इसलिए, यदि आप संवाद के माता-पिता को फ़ॉर्म में ले जाते हैं, तो ओवरले संवाद पर होगा, जिससे उपयोगकर्ता को संवाद के साथ बातचीत करने से रोका जा सकेगा। आईई 7 के लिए एक फिक्स ओवरले के जेड-इंडेक्स को -1 पर सेट करना है, फिर ओवरले तत्व क्लोन करें और इसे फॉर्म में जोड़ें जैसे आपने संवाद के लिए किया था। फिर संवाद की नज़दीकी घटना में, क्लोन ओवरले को हटा दें। IE7 Z-Index Layering Issues

अपनी वेबसाइट लेआउट के आधार पर, आप केवल ओवरले को स्थानांतरित करने में सक्षम हो सकते हैं और इसे क्लोन करने की आवश्यकता नहीं है। मुझे इसे क्लोन करना पड़ा, क्योंकि मेरी वेबसाइट लेआउट बाएं और दाएं हाशिए हैं, और मुझे पूरे क्षेत्र को कवर करने के लिए ओवरले की आवश्यकता है। नीचे मैं क्या किया का एक उदाहरण है:

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

यह या नहीं प्रासंगिक हो सकता है हो सकता है लेकिन यह मेरी समस्या और समाधान था:

मैं ठीक उसी मुद्दा था, जब मैंने संवाद खोला तो मेरा "फॉर्म" टैग "div", टैग के साथ बदल दिया गया।

यह था, क्योंकि मैं एक पहले से ही खोला प्रपत्र तत्व में संवाद रखा, (जाहिर है आप एक फार्म के भीतर एक रूप नहीं हो सकता)

न मैं क्या किया था :)

<form> 
    <form> 

    </form> 
</form> 
0

मैंने हाल ही में HTML फॉर्म सत्यापन के लिए एक प्लगइन बनाया है। आप इसे स्वयं आज़मा सकते हैं। Prashant-UI-Validator

Jquery का उपयोग करके बिल्ड करें, बूटस्ट्रैप का समर्थन करता है और आप इसे अपने तरीके से कॉन्फ़िगर कर सकते हैं। यह विभिन्न डेटा प्रकारों जैसे INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL और सबसे महत्वपूर्ण रूप से आपके कस्टम जावास्क्रिप्ट सत्यापन कोड का समर्थन करता है।

आशा है कि यह मदद करता है,

0

मैं इस एक यह IE8 में काम करता है, jQuery 1.11.2 और का उपयोग कर jQueryValidate 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 
    })