![]() |
![]() |
![]()
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. |
|
|
![]() |
![]()
Post
#2
|
|
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 :/ |
|
|
![]() ![]() |
![]() |
Aktualny czas: 4.10.2025 - 19:50 |