एएसपी.नेट एमवीसी 3 में अविभाज्य सत्यापन का उपयोग करते हुए, जब कोई फॉर्म अमान्य होता है तो मैं कार्रवाई कैसे कर सकता हूं?

Question

मेरे पास jQuery UI टैब के साथ एक पृष्ठ है, और पहले टैब पर एक आवश्यक फ़ील्ड है। प्रमाणीकरण कार्य करता है, और यदि उपयोगकर्ता ने कोई मान दर्ज नहीं किया है तो सत्यापन के क्षेत्र में सत्यापन संदेश दिखाई देता है। हालांकि, यदि उपयोगकर्ता पहले टैब पर नहीं है, तो यह स्पष्ट नहीं है कि फ़ील्ड अमान्य है।

इस मामले में, मैं पहला टैब दिखाना चाहता हूं, लेकिन मुझे यकीन नहीं है कि एक 'अमान्य' ईवेंट के लिए कॉलबैक पंजीकृत करने के बारे में कैसे जाना है, यदि कोई है।

मैंने टैब के ऊपर एक सत्यापन सारांश भी दिखाया है, जो उपयोगकर्ता के टैब पर ध्यान दिए बिना दिखाई देगा, लेकिन मेरी वरीयता उपयोगकर्ता को मैदान में ले जाएगी।

मैंने jquery.validate.unobtrusive.js फ़ाइल को देखने का प्रयास किया है, और ऐसा लगता है कि jquery.validate.js का विस्तार होता है। Jquery.validate के लिए प्रलेखन को देखते हुए, मुझे लगता है कि invalidHandler विकल्प है जिसे validate method पर भेजा जा सकता है, लेकिन मुझे यह नहीं पता कि इसका उपयोग कैसे करें jquery.validation.unobtrusive द्वारा।

मुझे थोड़ा खो गया महसूस हो रहा है, इसलिए किसी भी मदद की सराहना की जाएगी!

संपादित

मैं कभी नहीं पता चल जवाब है, लेकिन कोई समाधान है, जो मैं नीचे पोस्ट के साथ आया था। फिर भी, मुझे आशा है कि कोई ऐसा करने के बेहतर तरीके से उत्तर देगा।

Answer 1

मैं मान्य और फार्म मैन्युअल प्रस्तुत करने के लिए समाप्त हो गया search कर सकते हैं:

$("#save-button").button().click(function() { 
    if (!$("#profile-form").valid()) { 
     if ($("#tabs").tabs("option", "selected") > 0) { 
      $("#tabs").tabs("option", "selected", 0); 
     } 
     return false; 
    } 
    $("#profile-form").submit(); 
}); 

Answer 2

आप errorPlacement() फ़ंक्शन

Answer 3

कोशिश विनीत के लिए एक नया अनुकूलक जोड़ने।

मेरा मार्कअप अलग दिखता है क्योंकि मैंने टैब बनाने के लिए JQuery UI के बजाय टेलीरिक का उपयोग किया था। यहाँ क्या मेरी मार्कअप

<div id="rItemTabs"> 

    <ul> 
     <li><a href="#rItemTabs-1">Tab 1</a></li> 
     <li><a href="#rItemTabs-2">Tab 2</a></li> 
    </ul> 
    <!-- End Tab Nav--> 

    <!-- Begin Tab Contents --> 
    <div id="rItemTabs-1"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

    <div id="rItemTabs-2"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

</div> 

इस स्क्रिप्ट का लक्ष्य है, "टैब सामग्री" में प्रत्येक div के माध्यम से जाने के लिए देखने के लिए है (विनीत स्क्रिप्ट के माध्यम से डाला सत्यापन त्रुटियों के साथ, यानी) सत्यापनकर्ता से गुजरने के बाद की तरह दिखाई देता है " फील्ड-सत्यापन-त्रुटि "वर्ग (जो केवल त्रुटि होने पर मौजूद होनी चाहिए), और यदि यह वर्ग पाया गया था तो संबंधित टैब Nav आइटम का रंग बदलें (यानी टैब सामग्री की आईडी टैब के href का समान है नौसेना आइटम)।

$.validator.unobtrusive.adapters.add(
    'tab-validation', 
    function() { 
     var tabs = $('#rItemTabs [id*=rItemTabs]'); 
     $(tabs).each(function() { 
     if ($(this).has('.field-validation-error').length) { 
      var tabId = '#' + $(this).attr('id'); 
      $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' }); 
     } 
    }); 
} (jQuery)); 

मुझे उम्मीद है कि यह आपके लिए और साथ ही साथ काम करता है।

Answer 4

यह here से लिया तुम क्या चाहते हो जाएगा कोड:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").submit(function() { 
      $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id); 
     }); 
    }); 
</script> 

यह पहला टैब में त्रुटि है कि पर ले जाएंगे। यह एक परियोजना मैं विकासशील हूँ में महान काम कर रहा है ...

Answer 5

यहाँ समाधान है कि मेरे लिए काम किया है: जवाब देने के लिए

<button type="submit" onclick="ValidateRequired();">Save</button> 

function ValidateRequired(){ 
    $(':input[required]', '#myForm').each(function(){ 
     if ($(this).val() == ''){ 
      var errorTab = $(this).closest('div').attr('id'); 
      $('#tabs').tabs('select', '#'+errorTab); 
     } 
    }); 
}