Sunucu tarafı ASP .NET MVC doğrulamasıyla aynı biçimlendirme oluşturmak için jQuery doğrulamasını nasıl alabilirim?

Question

ASP .NET MVC 1.0 ve jQuery'yi (validation plugin dahil) kullanarak bir web uygulaması geliştiriyorum. Tipik bir "düzenleme varlık" için sunucu tarafı biçimlendirme görünümü geçersiz veri Ad alanına nakledilir

<label for="FirstName">FirstName:</label> 
<%= Html.TextBox("FirstName", Model.FirstName) %> 
<%= Html.ValidationMessage("FirstName") %> 

aşağıdaki gibidir, elde edilen HTML tam olarak hangi

<label for="FirstName">FirstName:</label> 
<input type="text" value="" name="FirstName" id="FirstName" class="input-validation-error text"> 
<span class="field-validation-error">Please enter the first name.</span> 

ne yapacağınız ASP .NET MVC'den kutunun dışında bekler.

Şimdi jQuery ile istemci tarafı doğrulamayı ekliyorum ve tam olarak aynı şekilde davranmasını istiyorum - yani giriş kontrolüne bir giriş-onaylama hatası sınıfı verilir ve bir sınıfa bir sınıf eklenir Hata mesajını göstermek için alan doğrulama hatası.

Neredeyse yokum, ama pek yok. ErrorElement seçeneğinin kullanılması, doğrulayıcıyı bir etiket yerine hata mesajı için bir alan oluşturmak üzere alır. ErrorClass seçeneğinin kullanılması, giriş elemanına bir giriş-doğrulama hatası sınıfı verildiği anlamına gelir.

Elimdeki sorun, hata iletisinin da bir girdi-geçerlilik-hata sınıfı alması ve alan doğrulaması hatasına sahip olmasını istiyorum.

Bu sorunu gidermek için vurgulama ve tek noktaya getirme işlevlerini kullanmayı denedim, ancak açıklıktaki sınıfları karıştırmaya başladığımda, doğrulama işlemi çalışmayı durdurur ve yalnızca formu sunucuya gönderir.

Dışarıda, bunu düzeltmek için herhangi bir fikrim var mı? Teşekkürler.

Answer 1

I girişi ve hata elemanlarına uygulanan sınıfı ile işe yaramaz neden oldu sahip olduğu sorun gibi. Eklenti, hata mesajını göstermek veya gizlemek için ve aynı zamanda kaç tane geçersiz öğe sayıldığına bakılmaksızın o sınıfla ilgili öğeleri arar.

Bu sorunları önlemek için, ben errorClass kullanarak durdurdu: 'girdi-doğrulama hatası' satır Darin cevabı gösterilen ve bu şekilde varsayılan değer bıraktı. ErrorPlacement işlevinde, doğru sınıfı hem hataya hem de girdi öğelerine ekliyorum, ayrıca iletiyi DOM'a doğru yere yerleştiriyorum. Bu şimdi çalışıyor gibi görünüyor.

$('form').validate({ 
errorElement: 'span', 
errorPlacement: function(error, element) { 
    error.insertAfter(element); 
    error.addClass('field-validation-error'); 
    element.addClass('input-validation-error'); 
},   
rules: { 
    FirstName: { 
     required: true 
    } 
}, 
messages: { 
    FirstName: { 
     required: 'Please enter the first name.'  
    } 
} 

şöyle JavaScript

});

Bana doğru yönde işaret ettiği için girişine Darin sayesinde.

Answer 2

Ödeme errorPlacement geri arama:

$('form').validate({ 
    errorClass: 'input-validation-error', 
    errorElement: 'span', 
    errorPlacement: function(error, element) { 
     // Insert and manipulate the span element here: 
     error.insertAfter(element) 
      .removeClass('input-validation-error') 
      .addClass('field-validation-error'); 
    },   
    rules: { 
     FirstName: { 
      required: true 
     } 
    }, 
    messages: { 
     FirstName: { 
      required: 'Please enter the first name.'  
     } 
    } 
});