Validar Url con Javascript

En el siguiente código se muestra un ejemplo de como validar un string/url con Javascript, o sea comprar si un string/texto dado es una Url valida.

El ejemplo esta integrado en una función Javascript.

function is_url(str) {
    //Declaramos la expresión regular que se usará para validar la url pasada por parámetro
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
    //Retorna true en caso de que la url sea valida o false en caso contrario
    return regexp.test(str);
 }

//Uso
var Url = "http://notasdelprogramador.com";
if(is_url(Url){
    alert('Es una url válida');
    console.log('Es una url válida');
}else{
    alert('La url pasada no es válida');
    console.log('La url pasada no es válida');
}

JavaScript – Función is_array()

En JavaScript, muchas veces necesitamos comprobar si una variable es un array y en JS no tenemos una función que nos facilite la tarea.

En este post creamos una función llamada is_array para realizar esta validación.

function is_array(input){
  return typeof(input)=='object'&&(input instanceof Array);
}

//Ejemplo uso
//Definimos un array
var myCars=new Array("Saab","Volvo","BMW");

//Validamos si myCars es un array o no
if(is_array(myCars)){
  alert("true");
}else{
    alert("false");
}

Explicación:

El typeof() acepta cualquier entrada y devolverá el tipo de entrada. Por lo tanto, si dice que el tipo de entrada de nuestra función es “object”, eso significa que nuestra entrada es un objeto. Una matriz es un tipo de objeto en JavaScript.

Aquí está una lista de algunos tipos de variables comunes de JavaScript:

  • String
  • Boolean
  • Number
  • Function
  • Object
  • Undefined

A continuación, sólo debemos asegurarnos de que la entrada es el tipo objeto. Podemos comprobar si se trata de una instancia del objeto Array mediante el uso de instanceof.

Habilitar/Deshabilitar un Radio Buttom con JavaScript y JQuery

En el siguiente código mostramos como hacer para habilitar/deshabilitar un radio buttom con Jquery y JavasCript.

<script language="javascript">
	<!--
		// Deshabilitamos el Radio según un Id dado
		function DisableRadio(Id){
			// Deshabilitamos el Radio buttom
			$("#"+Id).attr("disabled","disabled"); // Ejemplo: Jquery
			// Otra forma de hacerlo: document.frmRating.Rating[0].disabled = true;
		}

		// Deshabilitamos el Radio según un Id dado
		function EnabledRadio(Id){
			// Habilitamos el Radio buttom
			//$("#"+Id).attr("disabled","");
			document.frmRating.Rating[0].disabled = false; // Ejemplo JavaScript
		}

		/*
		 * La siguiente función chequea si el radio esta habilitado y lo deshabilita, si esta deshabilitado lo habilita
		 * Sive para cuando queremos que por ej. al hacer click en un boton cambie su estado
		 */
		function EnableOrDisabledRadio(IdRadio){
			//alert($("#"+IdRadio).attr("disabled"));
			if($("#"+IdRadio).attr("disabled")==false){
				$("#"+IdRadio).attr("disabled","disabled");
			}
			else{
				$("#"+IdRadio).attr("disabled","");
			}
		}
	//-->
</script>

En el siguiente código mostramos el formulario donde se llamará a la función JavasCript.

<form method="post" action="" name="frmRating">
	SI <input type="radio" name="SuccessfulSale" value="Y" onClick="EnabledRadio('positive');"/>
	NO <input type="radio" name="SuccessfulSale" value="N" onClick="DisableRadio('positive');"/>
	<input id="positive" type="radio" name="Rating" value="50"/>
	<span style="color:blue;font-weight:bold;">Positvo</span><br/>
	<input type="radio" name="Rating" value="30"/>
	<span style="color:balck;font-weight:bold;">Neutro</span><br/>
	<input type="radio" name="Rating" value="10"/>
	<span style="color:red;font-weight:bold;">Negativo</span>
</form>

Deshabilitar el autocompletar de formularios

El auto completado de los campos de tipo texto en los formularios web son de gran ayuda, pero hay veces que queremos deshabilitarlo para el tipo de información que el usuario ingresara, como por ejemplo un numero de documento, o tarjeta de crédito.
Hay dos formas de desabilitar el autocompletado en los formularios.
La primera es indicandolo en el código Html del formulario, o en los compos del mismo, hay que destacar que si usamos la sentencia que desahabilita el autocompletado sobre la etiqueta del formulario la misma tendra prioridad sobre todos los campos del mismo, por lo que si uno quiere hacerlo sobre x campos nada mas, conviene colocarlo en las propiedades de los input, el inconveniente de esta forma de deshabilitar el autocompletado es que no es un estandar validado por la W3C, sino una opción propietaria de Microsoft y por consiguiente a la hora de validar el Html dara problemas.

Ejemplos de la primera opción de deshabilitar el atucompletado.

 <!-- Ejemplo en Formulario -->
<form method="POST" name="FrmName" id="FrmId" autocomplete="off">
       <!-- elementos del formulario -->
</form>
<!-- Ejemplos autocomplete="off" en campos de tipo text -->
<input  type="text" id="InpId" name="InpName" autocomplete="off" />

Hay que destacar que al no ser un atributo estandar, es probable que algunos exploradores no lo soporten.

Bien ahora pasamos al segundo ejemplo el cual si es soportados por todos los exploradores web y no da problemas con la validacion contra la W3C.
Lo que haremos es setear estos mismos atributos pero mediante el uso de JavaScript.
Declaramos una funcíón JavaScript que hará el trabajo.

<script language="javascript" type="text/javascript">
<!--
    function DisableAutocomplete(Element){
        Element.setAttribute("autocomplete", "off");
    }
-->
</script>

Ahora escribiremos el código Html que hace la llamada a la función JavaScript que agregará el atributo al elmemento Html.

<form method="post" id="FrmId" action="">
      <input  type="text"
                 id="InpID" 
                 name="InpName" 
                 value=""
                 onchange="DisableAutocomplete(this);"
                 />
</form>

Aceptar solo números en Campos de formulario

Creamos una función JavaScript la cual validara lo que pulsemos en el teclado y solo permitirá el ingreso de números.

<script language="javascript">
<!--
	var nav4 = window.Event ? true : false;
	function acceptNum(evt)
	{
		// NOTE: Backspace = 8, Enter = 13, '0' = 48, '9' = 57
		var key = nav4 ? evt.which : evt.keyCode;
		return (key <= 13 || (key >= 48 && key <= 57));
	}
//-->
</script>

LLamamos a la funcion en el evento onkeypress del campo del formulario.

<input name="FieldName" type="text"  onkeypress="return acceptNum(event)" maxlength="10"/>

Borrar el campo de un formulario al hacerle clic

Crear valores por defecto en formularios indicando el tipo de dato esperado, borrarlos al hacerle clic y restaurarlos al salir si no se ingresó un valor diferente.

<form method="post" action="" name="FrmTest" id="FrmTest">
	<input 
		type    = "text"
		name    = "nombre" 
		size    = 16 
		value   = "Escriba aquí su nombre" 
		onfocus = "javascript:this.value=''" 
		onblur  = "javascript:if(this.value=='') this.value='Escriba aquí su nombre';" 
	/>  
    <input type="submit" value="Validar" />
</form>