jquery - form - validation data annotations in asp net mvc

MVC.net JQuery Validation

Question

Después de intentar evitar JavaScript durante años, Iv comenzó a usar JQuery para la validación en MVC asp.net, ya que no parece haber una forma oficial de hacer la validación. Iv se sorprendió de lo bueno que es JQuery.

En primer lugar, ¿hay alguna forma de que intellisense funcione para JQuery y su complemento de validación, para que no tenga que aprender la API?

En segundo lugar, ¿cómo creo un resumen de validación para esto, actualmente adjunta el error a la derecha del cuadro de texto .:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
rules: {
UserName: {
required: true,
minLength: 2,
}
},
messages: {
UserName: {
required: "Please enter a username",
minLength: "Your username must consist of at least 2 characters",
}
}
});
});
</script>
<form id="CreateLog" action="Create" method="post" />
<label>UserName</label><br />
<%=Html.TextBox("UserName")%>
<br />
<div class="error"> </div>
<input type=submit value=Save />
</form>

Intenté agregar esto al guión:

 errorLabelContainer: $("#CreateLog div.error")

y esto al html:

 <div class="error"> </div>

Pero esto no funcionó.

Answer 1

Es posible que desee verificar el enfoque de validación ASP.NET MVC de Karl Seguin en CodeBetter.com y el lienzo de su aplicación de muestra.

Validación - Parte 1 - Comenzando

Validación - Parte 2 - Lado del cliente

Validación - Parte 3 - Lado del servidor

Answer 2

Existe una revisión de Visual Studio 2008 para JQuery IntelliSense en VS2008 . Esto podría haber sido incluido con SP1 también.

Answer 3

Intente especificar tanto un contenedor como un contenedor de etiquetas en sus opciones. También agregué display: none; al estilo de error-container para que jquery decida cuándo mostrarlo.

Html:

<div class="error-container">
<ul>
</ul>
</div>
<form id="CreateLog" action="Create" method="post" />
<label>UserName</label><br />
<%=Html.TextBox("UserName")%>
<br />
<input type=submit value=Save />
</form> 

Guión:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
errorLabelContainer: $("ul", $(''div.error-container'')),
wrapper: ''li'',
rules: {
UserName: {
required: true,
minLength: 2,
}
},
messages: {
UserName: {
required: "Please enter a username",
minLength: "Your username must consist of at least 2 characters",
}
}
});
});
</script>

Eso debería funcionar.

Answer 4

con respecto a intellisense para jquery (y otros complementos): para tener Intellisense completo en sus propios archivos de script, solo incluya la siguiente línea en la parte superior de su archivo .js una vez por cada archivo que desee desde Intellisensee:

/// <reference path="[insert path to script file here]" />

simple, pero muy útil =)