2008-11-18 6 views
28

मेरे पास अजाक्स.बजिनफॉर्म() सहायक विधि के साथ बनाए गए एक फॉर्म के साथ एक एमवीसी दृश्य है, और मैं jQuery Validation plugin के साथ उपयोगकर्ता इनपुट को सत्यापित करने का प्रयास कर रहा हूं। मुझे अमान्य इनपुट डेटा के साथ इनपुट को हाइलाइट करने के लिए प्लगइन मिलता है, लेकिन अमान्य इनपुट के बावजूद फॉर्म सर्वर पर पोस्ट किया गया है।jQuery सत्यापन के साथ एएसपी.नेट एमवीसी अजाक्स फॉर्म

मैं इसे कैसे रोकूं, और यह सुनिश्चित कर लें कि डेटा केवल तभी पोस्ट किया जाता है जब फ़ॉर्म मान्य हो?

मेरे कोड


प्रपत्र:

<fieldset> 
    <legend>leave a message</legend> 
     <% using (Ajax.BeginForm("Post", new AjaxOptions 
      { 
       UpdateTargetId = "GBPostList", 
       InsertionMode = InsertionMode.InsertBefore, 
       OnSuccess = "getGbPostSuccess", 
       OnFailure = "showFaliure" 
      })) 
      { %> 
     <div class="column" style="width: 230px;"> 
      <p> 
       <label for="Post.Header"> 
        Rubrik</label> 
       <%= Html.TextBox("Post.Header", null, new { @style = "width: 200px;", @class="text required" }) %></p> 
      <p> 
       <label for="Post.Post"> 
        Meddelande</label> 
       <%= Html.TextArea("Post.Post", new { @style = "width: 230px; height: 120px;" }) %></p> 
     </div> 
     <p> 
      <input type="submit" value="OK!" /></p> 
    </fieldset> 

जावास्क्रिप्ट सत्यापन:

$(document).ready(function() { 
    // for highlight 
    var elements = $("input[type!='submit'], textarea, select"); 
    elements.focus(function() { 
     $(this).parents('p').addClass('highlight'); 
    }); 
    elements.blur(function() { 
     $(this).parents('p').removeClass('highlight'); 
    }); 

    // for validation 
    $("form").validate(); 
}); 

संपादित करें: मैं पु के लिए downvotes हो रही थी के रूप में अनुवर्ती समस्याओं और जवाब में उनके समाधान blishing, यहाँ भी काम कर सत्यापित करें विधि

function ajaxValidate() { 
    return $('form').validate({ 
    rules: { 
     "Post.Header": { required: true }, 
     "Post.Post": { required: true, minlength: 3 } 
    }, 
    messages: { 
     "Post.Header": "Please enter a header", 
     "Post.Post": { 
      required: "Please enter a message", 
      minlength: "Your message must be 3 characters long" 
      } 
     } 
    }).form(); 
} 

उत्तर

30

कोशिश AjaxOptions के लिए एक OnBegin कॉलबैक जोड़ने और वापसी $ ('फॉर्म') का मूल्य है ...। मान्य () .form() कॉलबैक से। source पर देखकर ऐसा प्रतीत होता है कि यह काम करना चाहिए।

function ajaxValidate() { 
    return $('form').validate().form(); 
} 

<% using (Ajax.BeginForm("Post", new AjaxOptions 
     { 
      UpdateTargetId = "GBPostList", 
      InsertionMode = InsertionMode.InsertBefore, 
      OnBegin = "ajaxValidate", 
      OnSuccess = "getGbPostSuccess", 
      OnFailure = "showFaliure" 
     })) 
     { %> 

संपादित सही कॉलबैक नाम के साथ अद्यतन।

+1

ऑनसबमिट वीएस इंटेलिजेंस में उपलब्ध विकल्पों में से एक नहीं है। हालांकि, इसके बजाय OnBegin का उपयोग करते समय, आपका समाधान एक आकर्षण की तरह काम करता है। त्वरित और सही उत्तर के लिए बहुत बहुत धन्यवाद! =) –