Validar Campos

jsoplay3 · #1 (**permalink**) 01/04/2009, 11:50

Hola amigos
Quiero validar unos campos con el siguiente codigo

Código PHP:

  <html> 

 <head> 

  <script language="JavaScript"> 

   function noVacio() { 

    var i; 

    var n = parseInt(document.frm.cantidad.value); 

    var bError = false; 

 
    for (i = 0; i < n; i++){ 

     bError = bError || (eval("document.frm.elemento" + i + ".value == ''")); 

     if (bError){ 

      alert("Campo inválido"); 

      eval("document.frm.elemento" + i + ".focus()"); 

      break; 

     } 

    } 

    if (!bError) alert("Ok"); 

   } 

 
  </script> 

 </head> 

 <body> 

  <form name="frm"> 

   <input type="text" name="elemento0"><br> 

   <input type="text" name="elemento1"><br> 

   <input type="text" name="elemento2"><br> 

   <input type="hidden" name="cantidad" value="3"> 

   <input type="button" name="enviar" value="enviar" onclick="noVacio()"> 

  </form> 

 </body> 

</html>

Y me valida efectivamente los campos, pero hay un problema y es que si ya tengo todos los campos llenos solo me aparece el mensaje de OK, y no me envia como tal el formulario. No me Deja enviarlo.

Podrian decirme como debo de hace rpor favor.

NOTA: El formulario que esta ahi no tiene el action, pero si lo tuviera de todas maneras no envia, ya l ohe probado.

Gracias por su atencioó.

elbuensaint · #2 (**permalink**) 01/04/2009, 13:01

cuando pones el action, cual es la accion que hace?
y a donde lo quieres enviar?
si lo vas a enviar por e-mail necesitas definir en el action el archivo php que envia los datos del formulario (de hecho desde ahi mismo podrias validar si los campos estan vacios o no).. o igual si lo vas a incluir en una base de datos, el archivo php debera hacer las respectivas conexiones para agregar los campos...

como no se mucho de javascript no se si el error este en que al pulsar enviar solo llama a la funcion noVacio, entonces creo yo que tendrias que poner en esa misma otra funcion pero para enviar el formulario...

mmm... bueno, creo que todo depende de a donde lo quieres enviar o si el problema esta en el action que has realizado...

salu2

PhantomAce · #3 (**permalink**) 01/04/2009, 13:23

Hola que tal, yo haría lo siguiente

Código HTML:

<html>  
 <head>  
  <script language="JavaScript">  
   function noVacio() {  
    var i;  
    var n = parseInt(document.frm.cantidad.value);  
    var bError = false;  

    for (i = 0; i < n; i++){  
     bError = bError || (eval("document.frm.elemento" + i + ".value == ''"));  
     if (bError){  
      alert("Campo inválido");  
      eval("document.frm.elemento" + i + ".focus()");  
      break;  
     }  
    }  
    if (!bError) {
	alert("Ok");
	document.frm.submit();
    }
   }  

  </script>  
 </head>  
 <body>  
  <form name="frm" action="algo.php" method="post">  
   <input type="text" name="elemento0"><br>  
   <input type="text" name="elemento1"><br>  
   <input type="text" name="elemento2"><br>  
   <input type="hidden" name="cantidad" value="3">  
   <input type="button" name="enviar" value="enviar" onclick="noVacio()">  
  </form>  
 </body>  
</html>

pero no se que es lo que realmente quieras que haga tu action

Saludos

jsoplay3 · #4 (**permalink**) 01/04/2009, 14:30

Lo unico que quiero es que depsues me grabe la informacion e una base de satos pero eso yo si lo se hacer, soloq ue no se como decirle qeu el submit funcione pare ppara ya grabar la info en la base de datos
Gracias por lo que me puedan ayudar

elbuensaint · #5 (**permalink**) 01/04/2009, 14:33

utiliza el codigo que te dejo PhantomAce, solo en el action cambia el "algo.php" por el nombre del archivo que agrega los campos a la base de datos y listo

dannce4life · #6 (**permalink**) 01/04/2009, 14:56

mira esto, un saludo

jsoplay3 · #7 (**permalink**) 01/04/2009, 18:27

Ok con las repsuestas he solucionado el problema, muchas gracias. Mire el aporte de danne4life, me gustaria preguntarte si puedes compartir el codigo ya que no creo qeu este completo a donde direcciona esa Web. Podes, esa aplicacion esta muy buena.
Gracias

dannce4life · #8 (**permalink**) 01/04/2009, 20:17

como no, aquí te pongo el codigo html igual que figura en la web del creador.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/common/css/reset-fonts.css" />
        <title>fValidator</title>
        <script type="text/javascript" src="js/mootools.v1.1.js"></script>
        <script type="text/javascript" src="js/fValidator.js"></script>
        <script type="text/javascript">
            window.addEvent("domready", function() {
                var exValidatorA = new fValidator("exA");
            });
        </script>
    </head>
    <body>
        <div id="container">
          <div id="container_bd"><dl id="accordionExample" class="accordion"><dd class="accordion_content">
            <br />
            <h3>A. Simple form using fValidator</h3>
            <form id="exA" class="fValidator-form" method="post" action="#">
                <fieldset>
                    <legend>fValidator</legend>
                    <table>
                        <tfoot>
                            <tr>
                                <td colspan="2"><input id="exA_submit" type="submit" value="submit" /><input type="reset" value="reset" /></td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td><label for="exA_Id">ID:</label></td>
                                <td><input id="exA_Id" class="fValidate['required']" name="id" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Password">Password:</label></td>
                                <td><input id="exA_Password" class="fValidate['required']" name="password" type="password" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_cPassword">Confirm password:</label></td>
                                <td><input id="exA_cPassword" class="fValidate['required','=exA_Password']" name="cpassword" type="password" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Name">Name:</label></td>
                                <td><input id="exA_Name" class="fValidate['required','alpha']" name="name" type="text" /></td>
                            </tr>
                            <tr>
                                <td>Sex:</td>
                                <td>
                                    <label for="exA_Sex_male">male</label><input id="exA_Sex_male" name="sex" type="radio" value="male" />
                                    <label for="exA_Sex_female">female</label><input id="exA_Sex_female" class="fValidate['required']" name="sex" type="radio" value="female" />                                </td>
                            </tr>
                            <tr>
                                <td><label for="exA_Date">Birthday:</label></td>
                                <td><input id="exA_Date" class="fValidate['date']" name="date" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Phone">Phone:</label></td>
                                <td><input id="exA_Phone" class="fValidate['required','phone']" name="phone" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Phone2">Phone 2:</label></td>
                                <td><input id="exA_Phone2" class="fValidate['phone']" name="phone2" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Email">Email:</label></td>
                                <td><input id="exA_Email" class="fValidate['required','email']" name="email" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Url">URL:</label></td>
                                <td><input id="exA_Url" class="fValidate['required','url']" name="url" type="text" /></td>
                            </tr>
                            <tr>
                                <td><label for="exA_State">State:</label></td>
                                <td><select id="exA_State" class="fValidate['required']" name="state">
                                    <option value="">Select one...</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio value="OH"</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select></td>
                            </tr>
                            <tr>
                                <td><label for="exA_Number">Real (float):</label></td>
                                <td><input id="exA_Number" class="fValidate['required','real']" name="number" type="text" /></td>
                            </tr>
                        </tbody>
                    </table>
                </fieldset>
            </form>
            </dd>
        </dl>
</div>
</body>
</html>

te lo explico un poco.

si vez donde dice exA en el codigo JS, te daras cuenta que aplica el script a todos los formularios que tengan ese ID.

despues es personalizable.
para editar los estilos visuales, crea una sentencia de tipo clase en tu css bajo en nombre de .fValidator-msg
por ejemplo asi:

Código css:

Ver original.fValidator-msg {
background-color: #c00;
font-size: 85&#37;;
color: #fff;
padding: 5px;
}

no te olvides de bajar el Mootools 1.1, y el fValidator de sus respectivas web's y colocarlos en una carpeta llamada js.

un saludo, espero te sirva mi ayuda :D