2008-11-18 12 views
28

Ajax.BeginForm() yardımcı yöntemiyle oluşturulan bir formla MVC görünümüne sahibim ve kullanıcı girdisini jQuery Validation plugin ile doğrulamaya çalışıyorum. Geçersiz giriş verileriyle girişleri vurgulamak için eklentiyi alıyorum, ancak geçersiz girdiye rağmen form sunucuya gönderiliyor.ASP.Net MVC jQuery doğrulaması ile Ajax formu

Bunu nasıl durdurabilirim ve verilerin yalnızca form doğrulandığında gönderildiklerinden emin olun.

Kodum


formu:

<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> 

JavaScript doğrulama:

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

DÜZENLEME: Ben pu için downvotes başlamıştı gibi Burada, takip sorunlar ve cevapları bunların çözümlerini 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(); 
} 

cevap

30

deneyin $ ('form') değerini AjaxOptions bir OnBegin geri arama ekleme ve dönüş ... ayrıca çalışma doğrulamak yöntemidir. (doğrulamak) .form() geri aramadan. source'a bakarak bunun işe yarayacağı anlaşılıyor. Doğru geri arama adıyla güncellenen

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

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

DÜZENLEME.

+1

OnSubmit, VS intellisense'deki kullanılabilir seçeneklerden biri değil. Ancak, bunun yerine OnBegin kullanırken, çözümünüz bir çekicilik gibi çalışır. Hızlı ve doğru cevap için çok teşekkürler! =) –