Vivir y Aprender Web » Jquery https://viviryaprenderweb.com Desarrollo web, recursos y tutoriales sobre xhtml, css, javascript, jquery, php, ruby on rails, seo y diseño web Wed, 20 Apr 2016 06:22:22 +0000 es-ES hourly 1 https://wordpress.org/?v=4.1.41 Validar campos de un formulario con Javascript https://viviryaprenderweb.com/validar-campos-de-un-formulario-con-javascript/ https://viviryaprenderweb.com/validar-campos-de-un-formulario-con-javascript/#comments Thu, 12 Jan 2012 06:49:31 +0000 http://viviryaprenderweb.com/?p=36 ¿Cómo hacerlo? Ejemplo 1 Validar que los campos del formulario (unicamente los campos obligatorios) no se encuentren vacíos antes de enviarlo, de lo contrario el formulario no se enviará. Para este ejemplo he realizado la maquetación usando una tabla. Deseo ver de que se trata (explicación del ejemplo) Para presentar el formulario se ha usado […]

La entrada Validar campos de un formulario con Javascript aparece primero en Vivir y Aprender Web.

]]> ¿Cómo hacerlo?

Ejemplo 1

Validar que los campos del formulario (unicamente los campos obligatorios) no se encuentren vacíos antes de enviarlo, de lo contrario el formulario no se enviará. Para este ejemplo he realizado la maquetación usando una tabla.

Deseo ver de que se trata (explicación del ejemplo)

  • Para presentar el formulario se ha usado una tabla.
  • El formulario cuenta con campos que son obligatorios (precedidos por un astericos)
  • Mientras los campos obligatorios no se ingresen, el formulario no será enviado.
  • Si se trata de enviar el formulario, los campos obligatorios serán marcados con un fondo rosado y un borde rojo, mas una legenda que indica que el campo es obligatorio.
1
2
3
4
5
6
7

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.validator.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#register-form').jValidator();
  });
</script>

Ejemplo 2

Validar que los campos del formulario (unicamente los campos obligatorios) no se encuentren vacíos antes de enviarlo, de lo contrario el formulario no se enviará. Para este ejemplo he realizado la maquetación usando párrafos.

Deseo ver de que se trata (explicación del ejemplo)

  • Para presentar el formulario se ha usado parrafos.
  • El formulario cuenta con campos que son obligatorios (precedidos por un astericos)
  • Mientras los campos obligatorios no se ingresen, el formulario no será enviado.
  • Si se trata de enviar el formulario, los campos obligatorios serán marcados con un fondo rosado y un borde rojo, mas una legenda que indica que el campo es obligatorio.
1
2
3
4
5
6
7
8
9

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery.validator.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#login-form').jValidator({
      tag: 'p'
    });
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<link rel="stylesheet" href="ruta/al/archivo/jquery.validator.css" type="text/css" />
<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript" src="ruta/al/archivo/jquery.validator.js"></script>
<script type="text/javascript">
  // Es importantísimo que una vez hayamos incluido la librería de jQuery, incluyamos el
  // archivo jquery.validator.js, no antes. Asimismo, debemos de asegurarnos de incluir el
  // archivo que contiene los estilos de error (jquery.validator.css); los estilos aquí definidos
  // pueden ser modificados a antojo.
  $(document).ready(function(){
    // Seleccionamos el formulario (en este caso por su 'id') y le asociamos el validador.
    // Por defecto, se asume que se esta usando una tabla a fin de mostrar el formulario.
    // Para mayor información acerca de los parámetros que puede recibir y sus respectivos
    // valores por defectos, se ha dispuesto de una tabla con la información de estos valores.
    $('#register-form').jValidator();
  });
</script>
Parámetro Valor por defecto Descripción
wrapper ‘jValidator’ La clase del div que contiene los elementos del formulario. Esta contenido dentro la etiqueta <form>.
tag ‘tr’ Acepta como posibles valores: ‘tr’ o ‘p’. Indica si elemento del formulario se encuentra dentro de un <p> o un <tr>.
error ‘Campo obligatorio’ La leyenda a desplegará en caso el campo se encuentre vacío

Para mayor información y saber cual es la estructura a respetar (estructura que se espera), descargar cualquiera de los ejemplos que se han colocado al inicio de este post.

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

Próximo tema

Tabs (pestañas) con jQuery

La entrada Validar campos de un formulario con Javascript aparece primero en Vivir y Aprender Web.

]]> https://viviryaprenderweb.com/validar-campos-de-un-formulario-con-javascript/feed/ 0 Texto ‘Buscar’ por defecto https://viviryaprenderweb.com/texto-buscar-por-defecto/ https://viviryaprenderweb.com/texto-buscar-por-defecto/#comments Tue, 10 Jan 2012 05:12:56 +0000 http://viviryaprenderweb.com/?p=76 ¿Cómo hacerlo? Ejemplo 1 Colocamos un texto por defecto en la casilla de texto del buscador. Al cargar la página se coloca un texto por defecto (atributo «default») en la casilla de texto si esta se encuentra vacía. Al hacer clic en la casilla de texto, se quita el texto por defecto. Cuando se deja […]

La entrada Texto ‘Buscar’ por defecto aparece primero en Vivir y Aprender Web.

]]> ¿Cómo hacerlo?

Ejemplo 1

Colocamos un texto por defecto en la casilla de texto del buscador.

Al cargar la página se coloca un texto por defecto (atributo «default») en la casilla de texto si esta se encuentra vacía.

  • Al hacer clic en la casilla de texto, se quita el texto por defecto.
  • Cuando se deja la casilla de texto (eveto «blur»), se verifica el valor (atributo «value») de esta y si no se introdujo texto alguno se coloca el texto por defecto (atributo «default»).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function init_input_search(input_id){
      input = $('input#'+input_id);
      if(input.length > 0){
        default_text = input.attr('default');
        if(default_text == 'undefined'){
          default_text = '';
        }
        if(default_text != '' &amp;&amp; input.val() == ''){
          input.val(default_text);
        }
      }
 
      input.click(function(e){
        if($(this).val() == default_text){
          $(this).val('');
        }
      });
 
      input.blur(function(e){
        if($(this).val() == ''){
          $(this).val(default_text);
        }
      });
 
      input.parents('form').submit(function(e){
        $('input', $(this)).each(function(){
          if($(this).val() == $(this).attr('default')){
            $(this).val('');
          }
        });
      });
    }
 
    init_input_search('search_by');
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function init_input_search(input_id){
      input = $('input#'+input_id);
      // verificamos si la casilla de texto con el 'id' indicado existe
      if(input.length > 0){
        // obtenemos el valor del atributo'default'
        default_text = input.attr('default');
        if(default_text == 'undefined'){
          default_text = '';
        }
        // evaluamos que se haya definido un texto por defecto para mostrar en caso
        // que la casilla de texto este en blanco; si es asi lo colocamos como valor de
        // la casilla de texto
        if(default_text != '' &amp;&amp; input.val() == ''){
          input.val(default_text);
        }
      }
 
      // si se hace clic en la casilla de texto, se quita el texto por  defecto colocado al
      // cargar la página
      input.click(function(e){
        if($(this).val() == default_text){
          $(this).val('');
        }
      });
 
      // cuando la casilla de texto se deja, colocamos el texto por defecto solo en caso
      // que esta haya sido dejada en blanco
      input.blur(function(e){
        if(default_text != '' &amp;&amp; $(this).val() == ''){
          $(this).val(default_text);
        }
      });
    }
 
      // antes de enviar el formulario limpiamos la casilla de texto si al enviar el formuario
      // contiene el texto por defecto
      input.parents('form').submit(function(e){
        $('input', $(this)).each(function(){
          if($(this).val() == $(this).attr('default')){
            $(this).val('');
          }
        });
      });
 
    // inicializamos la casilla de texto
    init_input_search('search_by');
  });
</script>

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

La entrada Texto ‘Buscar’ por defecto aparece primero en Vivir y Aprender Web.

]]> https://viviryaprenderweb.com/texto-buscar-por-defecto/feed/ 0 Ajax con jQuery – básico https://viviryaprenderweb.com/ajax-con-jquery-basico/ https://viviryaprenderweb.com/ajax-con-jquery-basico/#comments Mon, 09 Jan 2012 05:05:11 +0000 http://viviryaprenderweb.com/?p=7 ¿Cómo hacerlo? Ejemplo 1 Cargamos la lista de departamentos a partir del país seleccionado (evento «change» del control). Antes de enviar la petición colocamos una imagen ‘loading’ con el texto alternativo «Cargando departamentos…» (esto último en caso que no se encuentre la imagen). Si el archivo a llamar no se encuentra mostramos una alerta con […]

La entrada Ajax con jQuery – básico aparece primero en Vivir y Aprender Web.

]]> ¿Cómo hacerlo?

Ejemplo 1

Cargamos la lista de departamentos a partir del país seleccionado (evento «change» del control).

  • Antes de enviar la petición colocamos una imagen ‘loading’ con el texto alternativo «Cargando departamentos…» (esto último en caso que no se encuentre la imagen).
  • Si el archivo a llamar no se encuentra mostramos una alerta con el texto «Ocurrio un problema al listar los departamentos del país seleccionado…».
  • Finalizada la petición ajax asignamos la salida obtenida al elemento con el id «states-cnt» (si se encontrarón departamentos, serán desplegados, sino será mostrado el texto «No hay departamentos configurados para este país»; esto es realizado por el archivo «find_states_by_country.php», el cual fue definido en el parámetro «url» del objeto $.ajax)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#countries').change(function(e){
      var country_id = $(this).val();
      if(country_id != ''){
        var request_find_states =
          $.ajax({
            type: 'GET',
            url: "find_states_by_country.php",
            data: {country_id: country_id},
            beforeSend: function(xhr, settings){
              $("#states-cnt").html("<img src="loading.gif" alt="Cargando departamentos..." />")
            },
            success: function(response, xhr, status){
              $("#states-cnt").html(response);
            },
            error: function(xhr, status, exception){
              alert("Ocurrio un problema al listar los departamentos del pais seleccionado...");
            }
          });
      }
    });
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var request =
      $.ajax({
        type: 'GET', // tambien puede ser POST
        url: "ruta/al/archivo/a/llamar/via/ajax",
        data: {parametro_1: valor_1, parametro_2: valor_2},
        beforeSend: function(xhr, settings){
          // acciones antes de realizar la petición vía ajax por ejemplo,
          // podemos colocar un texto "Cargando..." para indicar al usuario que
          // se esta esperando cierta respuesta y ocultar  el botón que realiza
          // la peticion
        },
        success: function(response, xhr, status){
          // acciones a realizar una vez se haya realizado la petición
          // generalmente, procesar/mostrar la salida del archivo invocado
        },
        error: function(xhr, status, exception){
          // acciones a realizar en caso que no se encuentre el archivo a llamar
        }
      });
  });
</script>

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

La entrada Ajax con jQuery – básico aparece primero en Vivir y Aprender Web.

]]> https://viviryaprenderweb.com/ajax-con-jquery-basico/feed/ 0