Controlas campo de formulario con espacio en blanco

Laika · #1 (**permalink**) 29/09/2009, 07:43

Tengo un formulario en el que si se dejan campos en blanco no deja enviarlo ya que son campos obligatorios.

Pero si una persona teclea un espacio en blanco sí deja enviarlo.

¿Como puedo controlar esto?

zerokilled · #2 (**permalink**) 29/09/2009, 08:09

utiliza expresion regular para determinar que existen carateres validos. por ejemplo, podrias utilizar /\S/.test(valor_campo). la expresion busca por otros caracteres que no sea caracteres en blanco como espacio, tabular, retorno de carro, entre otros. si devuelve true significa que tiene caracteres validos.

Adler · #3 (**permalink**) 29/09/2009, 08:12

Hola

No existe la función Trim en javascript, como la conocemos en ASP. Revisa este articulo

Suerte

Laika · #4 (**permalink**) 29/09/2009, 09:46

zerokilled no consigo que me funcione.

Si mi caja de texto es "nombre", como tendría que hacerlo?

Os pongo el formulario con una caja de texto de ejemplo:

Código:

<html>
<head>
        <script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- El '+nm+' debe de ser válido.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- El campo '+nm+' es obligatorio.\n'; }
    } if (errors) alert('Ha ocurrido el siguiente error: \n\n'+errors);
    document.MM_returnValue = (errors == '');
} }
//-->
    </script> 
</head>

<body>
<form action="tratar-enviar-contactar.aspx" method="post">
    <table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>     
<td width="82" height="21">(*) Nombre:</td>
        <td width="182" height="30"><input type="text" name="nombre" id="nombre" /></td>
</tr>

<tr>
        <td align="center"><input name="button" type="submit" id="button" onclick="MM_validateForm('nombre');return document.MM_returnValue" value="Enviar" /></td>
      </tr>
      
    </table>
    </form>
</body>
</html>

Adler · #5 (**permalink**) 29/09/2009, 12:46

Hola

Mira este ejemplo

Código javascript:

Ver original<html>
<head>
        <script type="text/javascript">
<!--
function validateForm(elem) {
var val_campo = document.getElementById(elem).value;
var patron=new RegExp(/^\s+|\s+$/);
alert(patron.test(val_campo));
if (patron.test(val_campo) == true) {
alert("La cadena no es correcta")
} else {
alert("La cadena es correcta")
}
}
//-->
    </script> 
</head>
 
<body>
<form action="tratar-enviar-contactar.aspx" method="post">
    <table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>     
<td width="82" height="21">(*) Nombre:</td>
        <td width="182" height="30"><input type="text" name="nombre" id="nombre" /></td>
</tr>
 
<tr>
        <td align="center"><input name="button" type="submit" id="button" onclick="validateForm('nombre');return false" value="Enviar" /></td>
      </tr>
      
    </table>
    </form>
</body>
</html>

Suerte

Laika · #6 (**permalink**) 30/09/2009, 01:08

¿Como podria fusionar esa funcion con esta Siendo la llamada a al funcion la que os he indicado arriba?:

Código:

 <script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- El '+nm+' debe de ser válido.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- El campo '+nm+' es obligatorio.\n'; }
    } if (errors) alert('Ha ocurrido el siguiente error: \n\n'+errors);
    document.MM_returnValue = (errors == '');
} }
//-->
    </script>

zerokilled · #7 (**permalink**) 30/09/2009, 01:56

disculpame pero soy reacio a los codigos de macromedia. no se si tengas una razon para justificar el uso especifico de esa funcion. en todo caso, ¿comprobastes el ejemplo de Adler? es mas que sencillo y menos complejo.

ceSharp · #8 (**permalink**) 30/09/2009, 02:18

Hola Laika,

Yo utilizo una función tal que así:

-------------------------
function strBlanco(str)
{
var numCaracStr = str.length;
var espacios = str.split(" ");
var numEspacios = espacios.length - 1;
if(numEspacios == numCaracStr)
{
return false;
}
else
{
return true;
}
}
----------------------------
Hago un split por espacios de la cadena y si el array tiene tantas posiciones como longitud de texto (length) es que estoy pasando una cadena de espacios. Al llamar a esta función con la cadena como parámetro te devuelve un true si no es una cadena de espacios y false si lo es.

Salu2

Laika · #9 (**permalink**) 30/09/2009, 03:27

Si, el ejemplo de Adler me fucnoina pero ahora por ejemplo como hago para que el campo nombre sea obligatorio?

Adler · #10 (**permalink**) 30/09/2009, 05:14

Hola

Solo has de hacer algunas modificaciones

Código javascript:

Ver originalfunction validateForm(elem) {
var val_campo = document.getElementById(elem).value;
var patron=new RegExp(/^\s+|\s+$/);
if(val_campo == "") {
alert("El campo no puede estar vacio")
return (false);
}
else if (patron.test(val_campo)) {
alert("La cadena no es correcta")
return (false);
}
else
{
return (true);
}
}

Código html:

Ver originaltd align="center"><input name="button" type="submit" id="button" onclick=" return validateForm('nombre');" value="Enviar" /></td>

Suerte

Laika · #11 (**permalink**) 30/09/2009, 06:00

Gracias y para que me saque el error por cada uno de los campos que esta vacios?

Deberia de salirme un alert con los distintos errores que puede haber.

Me gustaría también:

Que me diga el campo sobre el que se ha producido el error
que se verifique si es un email valido. Por el tema de que tenga @