Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] JS, jQuery i walidacja formularza
Forum PHP.pl > Forum > Przedszkole
mm1
Witam, dopiero zaczynam przygodę z js i jQuery, dlatego już straciłem włosy nad małymi błedami.
Mianowicie mam formularz w html, musze dokonac walidacji hasła, daty urodzenia i strony www. reszta mi już działa.

Ale założenia sa takie:
- pola z gwiazdkami wymagane
- hasło ma conajmniej 5 znaków
- email jest poprawny example@domena.pl
- powtórz hasło - zgodne z hasło
- data urodzenia - wcześniejsza od aktualnej w danym momencie
- strona www zawiera poprawny adres

Kod
<html>
    <head>
        <title>Rejestracja użytkownika</title>
        <link rel="stylesheet" type="text/css" href="style/arkusz.css" />
        <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="jquery/jquery.validate.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        
        <script>
        $.validator.setDefaults({
            submitHandler: function() { alert("submitted!"); }
            });

        $().ready(function() {

                // validate signup form on keyup and submit
                $("#Form").validate({
                        rules: {
                                firstname: "required",
                                lastname: "required",
                                password: {
                                        required: true,
                                        minlength: 5
                                },
                                password2: {
                                        required: true,
                                        minlength: 5,
                                        equalTo: "#password"
                                },
                                email: {
                                        required: true,
                                        email: true
                                },
                                agree: "required"
                        },
                        messages: {
                                firstname: "Please enter your firstname",
                                lastname: "Please enter your lastname",
                                password: {
                                        required: "Please provide a password",
                                        minlength: "Your password must be at least 5 characters long"
                                },
                                password2: {
                                        required: "Please provide a password",
                                        minlength: "Your password must be at least 5 characters long",
                                        equalTo: "Please enter the same password as above"
                                },
                                email: "Please enter a valid email address",
                                agree: "Please accept our policy"
                        }

                });

                //
        });

        </script>
    </head>
    <body>
        
        <form action="" method="get"><table>
          
               <tr><td><p class="a"> Rejestracja użytkownika </p></td><td></td></tr>
              
           <tr>
            <td><p>Imię(*)</p></td>
            <td><input id="cname" name="name" type="text" required /></td>
           </tr>
           <tr>
            <td><p>Nazwisko (*)</p></td>
            <td><input id="lastname" name="lastname" type="text" required /></td>
           </tr>
           <tr>
            <td><p>E-mail (*)</p></td>
            <td><input id="cemail" type="email" name="email" required /></td>
           </tr>
           <tr>
               <td><p>Hasło (*)</p></td>
               <td><input id="password" pattern=".{5,}" name="password" type="password" required placeholder="●●●●●" /></td>
           </tr>
           <tr>
            <td><p>Powtórzone hasło (*)</p>
            </td><td><input id="password2" type="password" name="password2" required placeholder="●●●●●"/></td>
           </tr>
           <tr>
            <td><p>Data urodzenia</p></td>
            <td><input type="date" name="bdate"></td>
           </tr>
           <tr>
            <td><p>Płeć</p></td>
            <td>
                <p>
                <input type="radio" name="plec">Kobieta
                <input type="radio" name="plec">Mężczyzna
                </p>
           </tr>
           <tr>
            <td><p>Zainteresowania</p></td>
            <td>
                <p>
                <input type="checkbox" name="software"> Software
                <input type="checkbox" name="hardware"> Hardware
                <input type="checkbox" name="telekomunikacja"> Telekomunikacja
                </p>
            </td>
           </tr>
           <tr>
            <td><p>Strona www</p></td>
            <td><input type="text" name="website"></td>
           </tr>
           <tr>
           <td><p>Regulamin</p></td>
           <td>
               <p>
               <input id="cagree" type="checkbox" name="agree" required />Akceptuję regulamin serwisu(*)
               </p>
           </td>
           </tr>
           <tr>
               <td><p class="ita">*Pola wymagane</p></td><td></td>
           </tr>
           <tr>
               <td></td>
               <td>
                   <p>
                   <input class="a" type="reset" name="reset" value="Wyczyść">
                   <input class="b" type="submit" name="submit" value="Wyślij">
                   </p>
               </td>
           </tr>
                </table></form>
        <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Poprawny CSS!" />
    </a>
</p>
        
    </body>
</html>
MateuszS
Bardzo prosta rzecz, jedna z najprostszych rzeczy do znalezienia w internecie. Nie będę tu pisał kodu żeby ludzie mnie o pazerność na "Pomógł" nie posądzili ale powiem tylko tyle że

- ilość znaków .val() i .length
- do haseł wykorzystać .attr('value') z jquery
- do maila znaleźć odpowiednie wyrażenie regularne
- to samo do www

Google google google wink.gif
mm1
Ehhhh... wrzuć kod tongue.gif muszę to zbadać oraganoleptycznie, inaczej nie poczuję o czym do mnie piszesz.
W sieci widziałem podobne pytania, ale często bez odpowiedzi, albo jakieś wymijające. A chciałem to ogarnąć wzrokowo.

Pozdrawiam i z góry dziekuję.

--------------------------------------------------------------------

Dobra, jakoś poszło, ale zostało mi jeszcze hasło i warunek z datą, za nic nie mogę tego ugryźć, nie chce mi się walidować i już. może ktoś poratuje kodem?

-------------------------------------------------------------------
Została mi już walidacja daty i to będzie skończone. smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.