38

मैं एएसपी.नेट एमवीसी 3 में नई अविभाज्य सत्यापन सुविधाओं का उपयोग कर एक फॉर्म को मान्य कर रहा हूं।jQuery Unobtrusive प्रमाणीकरण का उपयोग करते समय 'submitHandler' फ़ंक्शन कैसे जोड़ें?

तो मेरे पास फॉर्म को सत्यापित करने के लिए jQuery सत्यापित करने के लिए मैंने कोई कोड नहीं लिखा है। यह सब jQuery.validate.unobtrusive.js लाइब्रेरी लोड करके किया गया है।

दुर्भाग्य से मुझे 'क्या आप निश्चित हैं' में फंसने की जरूरत है? संदेश बॉक्स जब फॉर्म मान्य है लेकिन जमा करने से पहले। jQuery के साथ मान्य है जब इतनी तरह initialising आप विकल्प handleSubmit जोड़ना होगा:

$("#my_form").validate({ 
    rules: { 
    field1: "required", 
    field1: {email: true }, 
    field2: "required" 
    }, 
    submitHandler: function(form) { 
    if(confirm('Are you sure?')) { 
     form.submit(); 
    } 
    } 
}); 

लेकिन आप जब विनीत लाइब्रेरी का उपयोग आरंभ करने की जरूरत नहीं।

कोई भी विचार कहां/कैसे मैं उस मामले में सबमिट हैंडलर जोड़ सकता हूं?

Thx

+0

कोई भी: क्या एमएस से इसके लिए कोई आधिकारिक दस्तावेज है? –

+0

नोट: 'हैंडल सबमिट करें()' केवल तभी बुलाया जाता है जब सभी फॉर्म मान मान्य हों। अगर आपको कोई त्रुटि है तो इसे नहीं कहा जाता है। आपके जैसे पुष्टिकरण मांगने के लिए यह सही है (क्योंकि आप जानते हैं कि सबकुछ मान्य है) लेकिन यदि आप त्रुटियों के दौरान विशेष हैंडलिंग चाहते हैं तो आपको 'अवैध हैंडलर' का उपयोग करना होगा - डीग्रीन के उत्तर –

+0

देखें, जब तक कि यह पहले से प्रारंभ नहीं हो जाता है, आप कॉल भी कर सकते हैं ['jQuery.validator.setDefaults'] (https://jqueryvalidation.org/jQuery.validator.setDefaults/) सीधे और किसी भी बाद के फॉर्म intializations उन सेटिंग्स का उपयोग करेंगे। बस सुनिश्चित करें कि यह डोम लोड होने से पहले चलता है और jQuery वैलिडेटर स्वचालित रूप से फॉर्म प्रारंभ करता है। – KyleMit

उत्तर

62

ताकि आप submitHandler इस तरह से बदलने के लिए विनीत पुस्तकालय सभी रूपों पर सत्यापनकर्ता जोड़ देती है,:

$("form").data("validator").settings.submitHandler = function (form) { alert('submit'); form.submit(); }; 
+2

धन्यवाद @petrhaus - अच्छा सरल जवाब जिसने jQuery की मेरी समझ में भी वृद्धि की है। – WooWaaBob

+4

गतिशील रूप से लोड किए गए फॉर्म (उदा। संवाद) के लिए, आपको पहले $ .validator.unobtrusive.parse ($ ('form')) या $ ('form') पर कॉल करना होगा। डेटा अपरिभाषित होगा। – parliament

+0

इस बारे में निराशाजनक हिस्सा यह है कि मैं यह पता लगाने की कोशिश कर रहा था कि क्या गलत हो रहा था क्योंकि यदि सबमिटहैंडर दस्तावेज़ के अंत में

59

मैं इस सवाल का पाया, जबकि invalidHandler स्थापित करने के लिए एक रास्ता तलाश , submitHandler के विपरीत। दिलचस्प बात यह है कि, जब आप अविभाज्य सत्यापन का उपयोग करते हैं तो आप invalidHandler को उसी तरह सेट नहीं कर सकते हैं।

समारोह निकाल दिया नहीं है किसी अमान्य फ़ॉर्म का पता चला है जब:

$("form").data("validator").settings.invalidHandler = function (form, validator) { 
    alert('invalid!'); 
}; 

यह दृष्टिकोण काम करता है: जिस तरीके को

$("form").bind("invalid-form.validate", function() { 
    alert('invalid!'); 
}); 

यह प्रतीत हो रहा है कि jquery.validate.unobtrusive .js स्क्रिप्ट प्लगइन मान्य करें, और जिस तरह से प्लगइन हैंडलर को आमंत्रित करता है।

+0

नोट: यहां 'बाइंड' दृष्टिकोण सचमुच एक ही सटीक तरीका है jquery.validate init फ़ंक्शन –

+0

मदद करता है, कौन समझाने में मदद कर सकता है? यह 'आधिकारिक' तरीका नहीं दिखता है, अगर मैं submitHandler को परिभाषित करना चाहता हूं? – Elaine

+0

मैंने उपरोक्त सभी को 'अमान्य हैंडलर' को 'अलर्ट' पॉपिंग करने की कोशिश की, लेकिन यह पॉप अप नहीं हुआ। और '$ ('फॉर्म')। डेटा ('वैधकर्ता') 'रिटर्न' अपरिभाषित '। – Shimmy

10

मैं, इतना है कि यह करने के लिए ... :)

//somewhere in your global scripts 
$("form").data("validator").settings.submitHandler = function (form) { 
    var ret = $(form).trigger('before-submit'); 
    if (ret !== false) form.submit(); 
};

इस तरह बाध्य किया जा सकता है एक ईवेंट हैंडलर इंजेक्षन करना पसंद करते हैं, मैं करने के लिए इसे कहीं भी जरूरत बाध्य कर सकते हैं ...

submitHandler:

//in your view script(s) 
$("form").bind("before-submit", function() { 
    return confirm("Are you sure?"); 
});
33

निम्नलिखित निष्कर्ष के बीच अंतर को समझने के लिए रुचि का हो सकता कहा जाता है जब प्रपत्र सफलतापूर्वक मान्य है - सही सर्वर पोस्टबैक से पहले
invalidHandler: यदि सत्यापन कहा जाता है विफल रहता है और कोई पोस्ट वापस नहीं है

@ डीग्रीन का समाधान निश्चित रूप से विशेष हैंडलिंग इंजेक्ट करने का सबसे अच्छा तरीका प्रतीत होता है यदि फ़ॉर्म सत्यापन विफल हो जाता है और (invalidHandler) आप एक पॉप-अप मान्यता सारांश प्रदर्शन के रूप में कुछ इस तरह करने की ज़रूरत

$("form").bind("invalid-form.validate", function() { 
    alert('invalid!'); 
}); 

@PeteHaus समाधान कुछ करने के लिए यदि आप एक सफलतापूर्वक मान्य फार्म के पोस्टबैक को रोकने के लिए चाहते हैं (submitHandler सबसे अच्छा तरीका है)

$("form").data("validator").settings.submitHandler = function (form) { 
                alert('submit'); form.submit(); }; 

हालांकि मैं मैं क्या व्यवहार अधिभावी गया था (या नहीं अधिभावी) .validate विधि इस तरह से जुड़ कर के बारे में थोड़ा चिंतित था - और अलग ढंग से प्रत्येक तरीके से करना कारण है कि मैं था। तो मैंने स्रोत की जांच की। मैं दृढ़ता से किसी को भी जो इतना भी करता है और इस प्रक्रिया को समझने के लिए करना चाहता अनुशंसा करते हैं - कुछ 'अलर्ट' बयान या 'डिबगर' बयान में डाल दिया और इसके साथ *

पालन करने के लिए वैसे भी यह जब jquery.validate.unobtrusive हैंडलर initializes jquery.validate कि पता चला है बहुत आसान है प्लगइन यह validationInfo() विधि द्वारा बनाए गए विकल्पों को पुनर्प्राप्त करके parseElement() विधि में ऐसा करता है।

ValidationInfo() इस तरह के विकल्प देता है:

options: { // options structure passed to jQuery Validate's validate() method 
      errorClass: "input-validation-error", 
      errorElement: "span", 
      errorPlacement: $.proxy(onError, form), 
      invalidHandler: $.proxy(onErrors, form), 
      messages: {}, 
      rules: {}, 
      success: $.proxy(onSuccess, form) 
      }, 

jquery.validate.unobtrusive में onErrors() विधि गतिशील MVC के लिए मान्यता सारांश फलक बनाने के लिए जिम्मेदार है। यदि आप एक सत्यापन सारांश पैनल नहीं बना रहे हैं (@Html.ValidationSummary() के साथ जो आकस्मिक रूप से फॉर्म बॉडी के भीतर निहित होना चाहिए) तो यह विधि पूरी तरह से निष्क्रिय है और ऐसा कुछ भी नहीं है जिससे आपको चिंता करने की आवश्यकता न हो।

function onErrors(event, validator) { // 'this' is the form elementz 
    var container = $(this).find("[data-valmsg-summary=true]"), 
     list = container.find("ul"); 

    if (list && list.length && validator.errorList.length) { 
     list.empty(); 
     container.addClass("validation-summary-errors").removeClass("validation-summary-valid"); 

     $.each(validator.errorList, function() { 
      $("<li />").html(this.message).appendTo(list); 
     }); 
    } 
} 

तुम सच में आप चाहते हैं jquery.validate.unobtrusive हैंडलर इस तरह निकल सकते हैं - लेकिन मैं अपने आप परेशान नहीं हैं

$("form").unbind("invalid-form.validate"); // unbind default MS handler 

आप सोच रहे हैं कि क्यों यह काम करता है

$("form").data("validator").settings.submitHandler = ... 

और यह

$("form").data("validator").settings.invalidHandler = ... 
काम नहीं करता है

ऐसा इसलिए है क्योंकि submitHandler को सत्यापन के दौरान jquery.validate के अंदर स्पष्ट रूप से बुलाया जाता है। इसलिए इससे कोई फर्क नहीं पड़ता कि यह किस बिंदु पर सेट है।

validator.settings.submitHandler.call(validator, validator.currentForm); 

लेकिन invalidHandlerinit() इस तरह के दौरान एक घटना के लिए बाध्य है ताकि आप अपने कोड में यह सेट करता है, तो बहुत देर हो चुकी है

if (this.settings.invalidHandler) 
    $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler); 

कोड के माध्यम से एक छोटी सी स्टेपिंग समझ का एक बहुत के लिए बनाता है कभी कभी! उम्मीद है कि यह

* सुनिश्चित करें कि आपके पास सक्षम बंडलों में कमी नहीं है।

+4

अच्छा विस्तृत स्पष्टीकरण साइमन विशेष रूप से मेरे अस्पष्ट उत्तर की तुलना में :) – DGreen

+3

@DGreen मेरे उत्तर मुझे दर्द के कारण दर्द और समय की मात्रा के समान आनुपातिक होते हैं - लेकिन आपके उत्तर के बिना यह समय तक बहुत लंबा होता। इसे समझ लिया! –

+0

मैंने उपरोक्त सभी को 'अमान्य हैंडलर' को 'अलर्ट' पॉपिंग करने की कोशिश की, लेकिन यह पॉप अप नहीं हुआ। और '$ ('फॉर्म')। डेटा ('वैधकर्ता') 'रिटर्न' अपरिभाषित '। – Shimmy

1

मैंने इसे मूल उत्तर पर आधारित किया, जो मेरे लिए काम नहीं करता था। मुझे लगता है कि jQuery में चीजें बदल गई हैं।

सामान्य रूप से, इस कोड को लें और गंभीर त्रुटि जांच जोड़ें: डी मैं अपने रूपों पर डबल-सबमिशन को रोकने के लिए समान कोड का उपयोग करता हूं, और यह IE8 + (mvc4 और jquery 1.8.x के रूप में) में ठीक काम करता है।

$("#myFormId").confirmAfterValidation(); 

// placed outside of a $(function(){ scope 
jQuery.fn.confirmAfterValidation = function() { 
    // do error checking first. should be null if no handler already 
    $(this).data('validator').settings.submitHandler = confirmValidForm; 
}; 

function confirmValidForm(form) { 
    var validator = $(this); 
    var f = $(form); 
    if (confirm("really really submit?")) { 
     // unbind so our handler doesn't get called again, and submit 
     f.unbind('submit').submit(); 
    } 
     // return value is _ignored_ by jquery.validate, so we have to set 
     // the flag on the validator itself, but it should cancel the submit 
     // anyway if we have a submitHandler 
     validator.cancelSubmit = true; 
    } 
} 
संबंधित मुद्दे