Foros del Web - Ver Mensaje Individual

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