Añadir Funcionalidades Con JavaScript - Ejemplos

En la sección CSS y JS personalizado se explica que es posible programar la landing con nuestro propio código, utilizando JavaScript y de qué forma se añade a la landing que se está creando.

Es altamente útil poder incluir funciones avanzadas que nos ayuden a controlar o aprovechar mucho más el formulario de la landing que estamos creando. Por eso, aquí te mostramos unos cuantos ejemplos que te sirven para esto.  

¿Cómo referenciar un campo del formulario?

Simplemente, en una variable que incluyas en el código JavaScript, utiliza esta codificación, poniendo en el valor "Id del elemento"  =' XYZ' del campo del formulario, es decir XYZ es el id de ese campo.

Por ejemplo , si vamos a operar o hacer un determinado control sobre el campo password:

password = $("input[id=' Password']");

ó

password = $("#Password");

Validación de un campo y alerta

En la landing podemos validar cualquier campo del formulario y poner un aviso en caso de que la validación no sea satisfactoria. Por ejemplo:

~~~~

function lpgValidateExtra(){
  var errors = [];
   
  password = $("input[id='Password']");  
 
  if (password.val().length < 8) {
       password.css("border-color","red");
       errors.push("El password debe tener al menos 8 caracteres ");
    } else {
       password.css("border-color","");  
    }
 
  if (errors.length != 0){
   return errors;
  }  
  return true;        
}

~~~~

Incluir un Píxel dependiendo del valor que se haya introducido en un campo del formulario

En la página de confirmación, queremos incluir un Píxel que depende de un valor introducido o seleccionado en la página principal del formulario. Lo primero, para referenciar ese valor, tenemos que poner el nombre del campo entre llaves. Posteriormente ya trabajamos con ese valor, realizando la acción que queramos, en este caso, añadir el Píxel.

var my_cat = '{{ my_category }}';

if (my_cat === 'M') {
  var pixel
  var img = $('<img />', {src : pixel});
  img.appendTo('body')
}

Redirección automática a otra página

Algunas veces se quiere mostrar otra página, una vez mostrada la pagina de confirmación/agradecimiento durante un pequeño lapso de tiempo. Para hacerlo, se puede añadir el siguiente javascript en la página de confirmación.

<script type="text/javascript">

function redireccionar(){

window.location="http://www. mdirector.com";

} 

setTimeout ("redireccionar()", 3000); //tiempo expresado en milisegundos

</script>

Insertar un favicon

<script type="text/javascript">

(function() {

  var link = document.createElement('link');

  link.type = 'image/x-icon';

  link.rel = 'shortcut icon'; 

  link.href = 'http://urldelaimagendefavicon.ico';

  document.getElementsByTagName('head')[0].appendChild(link);

  }());

</script>

Validar que el teléfono sea español

<script type="text/javascript">

function lpgValidateExtra(){

var errors = [];

 var phone = $("input[id='Telefono']");

 var pattern = /^[6-9]\d{8}$/;

  

 if (phone.val().length != 9) {

  phone.css("border-color","red");

 errors.push("El teléfono debe tener al menos 9 caracteres de longitud");

 } else if (phone.val().search(pattern)) {

phone.css("border-color","red");

errors.push("El teléfono no es valido");

 } else {

 phone.css("border-color","");    

 }

 

 

if (errors.length != 0){

return errors;

 }  

 return true; 

}

</script>

Establecer que el valor de un campo tenga que coincidir con el valor de otro

function lpgValidateExtra(){ 
var errors = [];     
var cont = $('#campo1').val();
var cont2 = $('#campo2').val();
if (cont != cont2) {
$("input[name='campo1']").css("border","1px solid #bf0411");
$("input[name='campo2']").css("border","1px solid #bf0411");
errors.push("No Coinciden");  
}
if(errors.length!=0){
return errors;

}  
return true;        
}