Javascript + HTML + CSS + errorPlacement pobléma

Javascript + HTML + CSS + errorPlacement pobléma
2012-10-01T09:26:59+02:00
2012-10-01T12:50:44+02:00
2022-10-16T02:50:59+02:00
puzzafutár
Sziasztok!
Nemrég ismerkedem a HTML+CSS+Javasript-el, és elakadtam, amiben a segítségeteket kérném!
Van html-ben egy egyszerű formom, aminek az elemei CSS-el vannak igazítva. A formon van egy OK gomb, ami eküldésre szolgál, de elötte javascritel ellenőrzöm az input mezőket, hogy van-e benne valami. Az elenőrzés le is megy, csak a hibaüzenetek összevissza jelennek meg. kerestem a "errorPlacement"-el kapcsolatban példákat, de elég keveset találtam és azok sem működtek. ebben szeretném a vélemnyeteket kikérni. a lényeg, hogy a beviteli mezők mögött jelenjenek meg a hibaüzik

html kód:

<HTML> <BODY> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> <style type="text/css"> * { } label { width: 10em; } label.error { color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } #stylized label.error {font-size: 12px; color: red; margin: -20px 0px 0px 170px;}</style> <script> $(document).ready(function(){ $("#commentForm").validate(); }); jQuery.extend(jQuery.validator.messages, { required: 'A mező kitöltése kötelező!' }); </script> <form class="cmxform" id="commentForm" name="myForm" onsubmit="return ValidateForm()" style="position:relative" method="post"> <div id="e0" style="position:relative; border: 2px coral solid"> <span name="cimke2" style="position:absolute; top:20; left:20">Neved:</span> <input type="text" class="required" maxlength="10" name="mezonev" style="position:absolute; top:18; left:70"/> <font color="red" style="position:absolute; top:23; left:230; ">*</font> <span name="cimke1" style="position:absolute; top:50; left:5">Jelszavad:</span> <input type="password" class="required" maxlength="10" name="mezonev2" style="position:absolute; top:50; left:70"/> <font color="red" style="position:absolute; top:55; left:230; ">*</font> </div> <script> var koord=$('#e0 input:last').css('top'); var koord2=$('#e0 input:last').css('height'); $('#e0').css('height',parseInt(koord,10)+parseInt(koord2,10)+10); var divWidth=$('#e0').css('width',parseInt($('#e0 font:last').css('left'))+parseInt($('#e0 font:last').css('width'))+200) </script> <span name="cimke3" style="position:absolute; top:85; left:5">Jelszo ujra:</span> <input type="password" class="required" maxlength="10" name="mezonev3" style="position:absolute; top:83; left:70"/> <font color="red" style="position:absolute; top:88; left:230; ">*</font> <input type="submit" value="OK" style="position:absolute; top:120; left:100;"> </form> </BODY> </HTML>
így jelenik meg:
Mutasd a teljes hozzászólást!
Csatolt állomány
#e0 {min-height: 150px;}

Ez a border hibát megoldja.

Csinálj egyetlen hiba megjelenitő divet.
És ha nincs hiba elrejted, ha van megjelenited.
Abba teszel minden hibalehetőséget.
Azt bepozicionálod megfelelően, és akkor nemfog egyik erre, másik arra menni.
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd