Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Formularz validate jqury
atom90
post
Post #1





Grupa: Zarejestrowani
Postów: 172
Pomógł: 0
Dołączył: 11.06.2014

Ostrzeżenie: (0%)
-----

Postanowilem użyt tego pluginu do walidacji formularza. Niestety potrzebuje jeszcze aby podczas tej walidacji pokazywał się obok inputa div z obrazkiem czy poprawnie zostało wypisane pole czy też nie, nie wiem jak dokładnie to zaimplementować

Kod
$(document).ready(function() {
    $("#formularz").validate({

        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            url: {
                url: true
            },
            comment: {
                required: true
            }
        },
        messages: {
            name: {
                required: 'Pole wymagane',
                minlength: 'Wpisz conajmniej {0} znaki'
            },
            email: {
                required: 'Pole wymagane',
                email: 'Wpisz poprawny adres email'
            },
            url: {
                url: 'Wpisz poprawny adres URL'
            },
            comment: {
                required: 'Pole wymagane'
            }
        }

    });

//    $('#reg').click(function() {
//        if($("#cname").hasClass("valid"))
//            console.log("poprawnie");
//        else
//            console.log("niepoprawnie");
//    });
    $('#cname').on("keyup", function(){
        if($("#cname").hasClass("valid"))
           console.log("poprawnie");
       else
        console.log("niepoprawnie");
    });
    $('#cemail').on("keyup", function(){
        if($("#cemail").hasClass("valid"))
            console.log("poprawniem");
        else
            console.log("niepoprawniem");
    });

});


Probowałem robić pewne podchody by to aktualnie zmieniać status, ale to nie działa tak jak bym chciał, bo wystarczy ze wkleje poprawnie cos do pola to plugin nie wywali bledu, ale moje keyupy wywala ze niepoprawne. Chyba ze cos w pluginie samym da sie dodatkowego zrobic. Cel jest taki aby był ten komunikat o bledzie z pluginu na dole pod inputem, a obok ikonka o poprawnym wpisaniu lub blednym.
Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Jeśli element z poprawną walidacją ma klasę valid (jak w przykładzie), to możesz zastosować taki styl:

[HTML] pobierz, plaintext 
  1. :not(.valid):after{
  2.  background:url(obrazek.jpg);
  3.  display:block;
  4.  width:20px;
  5.  height:20px;
  6.  content:' ';
  7. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
atom90
post
Post #3





Grupa: Zarejestrowani
Postów: 172
Pomógł: 0
Dołączył: 11.06.2014

Ostrzeżenie: (0%)
-----

tak mniej wiecej on wyglada
http://s29.postimg.org/75kqjhivr/image.png
w miejsca aa to jest div
Kod
.icon {
    float: right;
    width: 25px;
    height: 25px;
    margin: 5px;
    /*background:url(ok.png) no-repeat center center;*/
}


Tak wyglada formularzw html
Kod
<form id="formularz" class="form" action="...#showFormError">
                     
                <fieldset>
                    <div class="top">
                        <div id="left">
                            <div id="imie" class="fields">

                                <label for="fname">Imię</label><div class="icon">aa</div>
                                <input id="fname" type="text" name="fname"class="required"/>
                                
                                

                            </div>
                            <div id="nazwisko" class="fields">

                                <label for="lname">Nazwisko</label><div class="icon">aa</div>
                                <input id="lname" type="text" name="lname"/>

                            </div>
                            <div class="fields">

                                <label for="pesel">PESEL</label><div class="icon">aa</div>
                                <input id="pesel" type="text" name="pesel"  maxlength="11"/>

                            </div>
                            <div class="fields">

                                <label for="email">Email</label><div class="icon">aa</div>
                                <input id="email" type="email" name="email"/>

                            </div>
                        </div>

                        <div id="right">
                            <div class="fields formfield">

                                <label> Adres </label><div class="icon">aa</div>
                                
                                <textarea name="adres" rows="7" cols="25" placeholder="....." ></textarea>                                
                                
                


                            </div>

                            <div class="styled">
                                <label > Kraj </label>
                                <select>
                                    <option>Polska</option>
                                    <option>Anglia</option>
                                </select>
                            </div>

                        </div>
                        <div style="margin-left: 100px;">
                            <img src="linia.png" alt="" height="2" width="650px" >
                        </div>
                        <div id="pass">
                            <div id="pass1" class="fields">
                                <label> Hasło </label><div class="icon">aa</div>
                                <input id="password" name="password" placeholder="....." type="password" size="20">

                            </div>

                            <div id="pass2" class="fields">
                                <label> Potwierdź Hasło </label><div class="icon">aa</div>
                                <input id="password_confirm" name="password_confirm" placeholder="....." type="password" size="20">

                            </div>

                        </div>
                        <div id="question">

                            <div class="styled2">
                                <label> Pytanie zabezpieczające</label>

                                <select>
                                    <option>Pytanie 1</option>
                                    <option>Pytanie 2</option>
                                </select>
                            </div>
                            <br>
                                <label> Odpowiedź</label><div class="icon">aa</div>
                                <input name="odpowiedz" placeholder="....." type="text" size="50">

                            
                        </div>

                        <div style="margin-left: 0px;">
                            <img src="linia.png" alt="" height="1" width="750px" >
                        </div>

                        <div class="footer">
                            <input id="reginster" type="image" src="zarejestruj.png" />
                            <div id="regulamin">
                                Rejestracja oznacza akceptację warunków <a href="http://google.pl" style="color: #8c9b93" target="_blank">regulaminu.</a>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form>


a tak wyglada gdy validator doda komunikat
Kod
<div id="nazwisko" class="fields">
<label for="lname">Nazwisko</label>
<div class="icon">aa</div>
<input id="lname" class="error" type="text" name="lname" aria-required="true" aria-invalid="true">
<br id="lname-error" class="error" for="lname">Pole wymagane</br>
<label id="lname-error" class="error" for="lname">Pole wymagane</label>
</div>



jesli valid to tam clasa zamiast error valid. Nie wiem jak wykorzystac ten przyklad co podales. Moze jakos inna podpowiedz :/
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Moje rozwiązanie zawierało błąd, bo selector after nie działa z inputami.

Jeśli akceptujesz ikonę w środku pola, to:
http://jsfiddle.net/rL56d7te/1/

padding-right to szerokość ikony.
Podstaw odpowiednie ikony, bo obecnie są duże.
Go to the top of the page
+Quote Post
atom90
post
Post #5





Grupa: Zarejestrowani
Postów: 172
Pomógł: 0
Dołączył: 11.06.2014

Ostrzeżenie: (0%)
-----

no troche nieciekawie moze to wygladac w polu adress gdy tekst najedzie na ta ikonke. hmm aktualnie zrobilem cos takiego

Kod
$('#reginster').click(function() {
          setTimeout(function(){if($("#fname").hasClass("valid"))
        $("#imie").find( ".icon" ).css( "background", "url(ok.png) no-repeat center center" );
      
       else if($("#fname").hasClass("error"))
            $("#imie").find( ".icon" ).css( "background", "url(iks.png) no-repeat center center" );}, 100);
      
      
   });


timeout bo czasem nie wychwicil ze clasa sie zmienila i nie dawal tego, ale to jest problem ze poprostu po kliknieciu przycisku dopiero sie zmienia to tlo. hmm no i do kazdego id(pola) takie warunki :/ myslalem jeszcze nad tym by w tablicy zapisac idki tych pol i po petli przejechac
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Od tego aby tekst nie nachodził na ikonki jest padding-right dla input, który ma mieć szerokość minimum szerokości ikony.
Obecnie w przykładzie są tam za duże ikony.
Go to the top of the page
+Quote Post
atom90
post
Post #7





Grupa: Zarejestrowani
Postów: 172
Pomógł: 0
Dołączył: 11.06.2014

Ostrzeżenie: (0%)
-----

super dzieki (IMG:style_emoticons/default/smile.gif)

Tylko jeszcze jeden mały problem bo jak nacisne button to niestety nie wskakuja te ikonki a info wskakuje
Go to the top of the page
+Quote Post
trueblue
post
Post #8





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Pokaż kod, html+css.
Go to the top of the page
+Quote Post
atom90
post
Post #9





Grupa: Zarejestrowani
Postów: 172
Pomógł: 0
Dołączył: 11.06.2014

Ostrzeżenie: (0%)
-----

http://ah-team1.nazwa.pl/1/formularz/form.html

edit:
choc nie zaprzeczam fajniej gdyby te ikonki były za inputami
Go to the top of the page
+Quote Post
trueblue
post
Post #10





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Działanie pluginu (przy klikaniu na submit) jest dokładnie opisane w dokumentacji.

Jeśli ma być na zewnątrz, możesz wstawić ikony za inputem i korzystać z selektora "+".
http://jsfiddle.net/rL56d7te/2/
Go to the top of the page
+Quote Post
atom90
post
Post #11





Grupa: Zarejestrowani
Postów: 172
Pomógł: 0
Dołączył: 11.06.2014

Ostrzeżenie: (0%)
-----

z faktu ze jak tam toz za inputem to image zostanie przeniesiony za komentarz po bledzie sposob mialem taki ze ikonke dawalem przed inputem ale z float right wtedy ladowal obok z prawej strony, ale jak dostac sie do elementow przed inputem
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 28.08.2025 - 17:16
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn