jQuery: Validate() para gente con prisas
Este plug-in de jQuery es muy potente para realizar validación javascript previa a la llamada al servidor. Aquí expongo un ejemplo en Asp.net Mvc2.
1) Incluir librería (en el ejemplo, con T4mvc):
<script src="<%: Links.Content.js.jquery_
2) Identificas el formulario a validar con un id : “Alta”
<% using (Html.BeginForm("Alta", "Registro", null, FormMethod.Post, new { id = "alta" }))
{ %>
<fieldset class="formulario">
<div class="formAlta">
<p>
<strong>
<%: Html.LabelFor(model => model.Usuario.Persona1.Nombre)
strong>
p>
div>
3) En el content donde colocas el código Javascript relacionas la función con el formulario mediante el identificador “Alta”:
<asp:Content ID="Content4" ContentPlaceHolderID="
<script type="text/javascript">
$().ready(function () {
$("#alta").validate({
4) Defines la regla:
rules: {
"Usuario.Persona1.Nombre": {
required: true,
minlength: 2
}
},
5) Defines el mensaje a mostrar para cada elemento:
messages: {
"Usuario.Persona1.Nombre": {
required: "Nombre obligatorio",
minlength: "El nombre debe tener al menos 2 caracteres"
}
6) Adaptas el CSS.
7) Anexo I : Para validadar algo un poco más complejo, como por ejemplo que el Email no existe en la base de datos:
7.1 ) En la vista .ascx ( con javascript empotrado)
rules: {
"Usuario.Email": {
required: true,
email: true,
remote: { url: "/Registro/CompruebaEmail", async: true, type: "post" }
},
7.2) En el controlador:
///
/// Comprobamos que el email no exista ya en la base de datos
/// Comprobamos que el email no exista ya en la base de datos
///
/// Email que no debe existir ya en nuestra base de datos
/// Devolvemos true o false en formato json
public virtual JsonResult CompruebaEmail(FormCollection form)
{
string email = Request.Params["Usuario.Email"];
bool noExiste = usuarioNegocio.ObtenerTodosLosElementos().Where(u => u.Email.Equals(email)).Count() == 0;
return Json( noExiste );
}
8) Página oficial :
Comentarios
Publicar un comentario