validar formulario problemas

[carolina3]

hola muy buenas

He creado un formulario con 4 campos uno tipo text otro contraseña, email y un selct el caso es que tengo liada una en el form que ni yo me aclaro y al intentar validar el formulario tengo algunos problemas uno de ellos que cuando me sale el mensaje de alerta de validación del primer campo y le doy a aceptar este se me va a la pagina siguiente como si el form estuviese ya rellenado en vez de mantenerse paar seguir verificando los campos.

bueno el caso es que el java script de validación necesita 1000 arreglos para mejorarlo, pero creo que una de las causas es que para enviar los datos utilizo una pequeña funcion y creo que se debe pelear con la misma de validar, deduzco vaya no soy experta.

dejo el código para ver si alguien me puede guiar un poco gracias

cod form:

Código HTML:

<link href="estiloportada.css" rel="stylesheet" type="text/css" />
<!--este script para hacer la llamada para colocar imagen en el select-->
<script src="select.js" type="text/javascript"></script>   
<link href="select.css" rel="stylesheet" type="text/css" />
 <!--este script me comprueba que el campo tienda no se repita -->
<script src="ajax.js"></script>
<!--este script para hacer la llamada para validar campos de formulario1-->
<script src="validaformindex.js" type="text/javascript"></script> 
 
 
<!--este script muestra las capas flotantes de los mensajes ocultos-->
<script language="javascript" type="text/javascript">
 
opac=0
goIn=null
 
function fade(dir, id){
if(document.all){document.all(id).filters.alpha.Opacity=opac}
if(document.getElementById && !document.all){document.getElementById(id).style.MozOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(id).style.KHTMLOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(id).style.opacity=(opac/100)-0.01}
if(dir==1 && opac<=100){opac=opac+2} else{clearTimeout(goIn)}
if(dir==0 && opac>=0){opac=opac-2} else{clearTimeout(goIn)}
goIn=setTimeout("fade('" + dir + "', '" + id + "')", 0)
}
 
</script>
 
<!--aqui este codigo para hacer una funcion de el boton de enviar del formulario para poder poner una imagen de sustitucion-->
<SCRIPT language="Javascript">
function enviar() {
document.form1.submit();
}
 
</SCRIPT>
 
<!--ocultar y mostrar una capa al clicar un boton -->
<script language="Javascript">  
function mostrar(nombreCapa){  
document.getElementById(nombreCapa).style.visibility="visible";  
}  
function ocultar(nombreCapa){  
document.getElementById(nombreCapa).style.visibility="hidden";  
}  
</script> 
 
 
 
 
 <form action="datoscliente.php" method="post" name="form1" id="form1">
  <fieldset id="form">
    <table width="248" align="center">
      <tr valign="baseline">
        <td colspan="2" align="left" nowrap="nowrap">
          <label >Nombre de tu tienda:</label>
        </td>
        </tr>
      <tr valign="baseline">
        <td height="35" colspan="2" align="right" nowrap="nowrap">
          <div id="muestra" onclick="fade(1, 'fadimg')"  onblur="fade(0, 'fadimg')">
            <input class="texto" type="text" name="tienda" value="" size="32" onblur="busca(this.form.tienda.value)" />
          </div>
          <!--este div muestra la vinyeta del primer campo de formulario-->
          <div id="fadimg" style="filter:alpha(Opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0">  </div>        </td>
        </tr>
      <tr valign="baseline">
        <td colspan="2" align="left" nowrap="nowrap"><label >Email:</label></td>
        </tr>
      <tr valign="baseline">
        <td colspan="2" align="right" nowrap="nowrap">
          <input class="texto" name="email" type="text" id="email" value="" size="32" onclick="fade(1, 'fadimg1')" onblur="fade(0, 'fadimg1')" /><br />
 
          <!--este div muestra la vinyeta del segundo campo de formulario-->
          <div id="fadimg1" style="filter:alpha(Opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0"></div>        </td>
        </tr>
      <tr valign="baseline">
        <td width="204" align="left"><label >Contraseña:</label></td>
      </tr>
      <tr valign="baseline">
        <td colspan="2" align="right" nowrap="nowrap"><input type="password" name="pasword" value="" size="32" /></td>
        </tr>
      <tr valign="baseline">
        <td colspan="2" align="left" nowrap="nowrap"><label >Tipo_de_tienda:</label></td>
        </tr>
      <tr valign="baseline">
        <td colspan="2" align="left" nowrap="nowrap"><select name="tipo_de_tienda" class="styled">
        
          <option>Alimentación</option>
          <option>Arte</option>
          <option>Artesania</option>
         
        </select></td>
        </tr>
      <tr valign="baseline">
        <td colspan="2" align="left" nowrap="nowrap"><br />
    
    
     <a href= "javascript:enviar()" onclick="valida_envia()" 
         onmouseOver="document.enviar.src='imagenes/botonform1.png';"    
         onmouseOut="document.enviar.src='imagenes/botonform.png';">
            
            <img src="imagenes/botonform.png" name="enviar" width="205"border="0">
            </a>  
               </td>
        </tr>
    </table>
    </fieldset>
  </form>
 

bueno y la pag validarformindex.js para validar los campos

Código Javascript:

function valida_envia(){ 
    //valido el nombre 
    if (document.form1.tienda.value.length==0){ 
         alert("Tiene que escribir el nombre de su tienda") 
         document.form1.tienda.focus() 
        return false; 
    } 
    //valido email
    if(document.form1.email.value.length==0) { //comprueba que no esté vacío
        alert('No has escrito tu e-Mail');
        document.form1.email.focus();
        return false;
  }
 
   
 
    //valido tipo de tienda 
    if (document.form1.tipo_de_tienda.selectedIndex==0){ 
         alert("Debe seleccionar un tipo de tienda.") 
         document.form1.tipo_de_tienda.focus() 
        return false; 
    } 
 
    //el formulario se envia 
    alert("Muchas gracias por enviar el formulario"); 
    document.form1.submit(); 
}
 

me faltaría validar la contraseña pero en principio solo me valida tienda y email y de esa manera por que solo comprueba si están vacíos los campos

no se si alguien puede ayudarme un poco gracias

[emprear]

@Carolina3

Esto es un "desaguisado"
<a href= "javascript:enviar()" onclick="valida_envia()"
onmouseOver="document.enviar.src='imagenes/botonform1.png';"
onmouseOut="document.enviar.src='imagenes/botonform.png';">

Sin detenerme a revisar tus funciones de validación y envío
se debería hacer asi

Código HTML:

<form ...... onsubmit="return valida_envia();">
 
<input type="submit" name="procesar" value="Enviar" class="envio" />
</form>
 

La función enviar, obviala, y si queres una imagen en el boton en value="Enviar" ponés value="." yluego lo estilizás con css, por ejemplo

Código CSS:

input.envio{
width: 25px;
height: 25px;
background-image: url(boton.jpg); 
border: none;
color: transparent;
}
 
input.envio:hover{
background-image: url(boton_over.jpg); 
}
 

El css se puede mejorar haciendo un pequeño sprite para los 2 estados

Saludos

[carolina3]

emprear muchas gracias voy aprobar, ami me parecía ya que todo venia por la función enviar que le doy al href: pero no sabia que hacer, gracias pruebo y te cuento.

[carolina3]

funciona bien solo que en la imagen del botón se ve el fondo blanco y antes no por que puede ser si es una imagen .png de todas formas gracias esta mejor como me has indicado.

[emprear]

acá hay un ejemplo de lo que te mencioné
http://foros.emprear.com/css/over_input/over_input.html

Saludos