» »

JavaScript prevrjanje vsebine v poljih

JavaScript prevrjanje vsebine v poljih

iMark ::

Pozdravljeni,

Na spletni strani imam več vnosnih polj za katera moram preverjati vnešeno vsebino in v primeru napačnega vnosa posredovati napako točno za določeno polje. Zanima me, kako naj izvedem to funkcijo, da mi ob napačnem vnosu vrne nek string na točno določeno mesto ter da se rob vnosnega polja obarva - kako naj JS "kliče" CSS style.

Npr.:

<form name="example" method="post" action="example.php" onsubmit="return checkform(this);">
<input type="text" name="example" maxlength="16"  autocomplete="off"/>
//tu bi rad, da se mi izpiše napaka
</form>


Prosil bi še za eno uslugo. Napako lahko že sami vidite na tej strani http://format-brje.com/test.html (stran je samo simbolična). Div z zelenim okvirjem (#leftBoxInner) bi se moral nahajati znotraj sivega okvirja (#content). Stvar je v tem, da ne smem imeti fiksne višine ker se mi višina prilagaja glede na PHP izpis v tabelo, torej mora biti na auto. Zelen okvir pa mora biti float:left; namreč se poleg njega nahaja drugi. Če bi dal sivemu okvirjmu float:left bi delalo vendar morate vedeti da na pravi strani imam še kake 4 zunanje dive in bi se vsi "premetali"/zamaknili, če bi sivemu (#content) spremenil float torej to ne pride v poštev.

<body>
	<div id="main"><!-- MAIN -->
		<div id="content"><!-- CONTENT -->
                <div id="leftBoxInner">
                	<p>test test test test test test</p>
		  </div>
		</div><!-- CONTENT -->
    </div><!-- MAIN -->
</body>


CSS:
#content{
	background-color:#999;
	border-bottom:thin #666 solid;
	height:auto;
	min-height:300px;

}
#leftBoxInner{
	border:solid 2px #0C0;
	float:left;
	width:620px;
	height:auto;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:20px;

}


Hvala in lep pozdrav.
  • spremenil: iMark ()

Major ::

1. jquery (dokumentacija)
2. Glede na to, da imaš #leftBoxInner floatan, mora biti tudi parent (#content) floatan.
IT Developer & Photography enthusiast.

Major ::

Še enkrat preglej kako ti poteka HTML flow, ker kot sam vidiš float in normal flow ne gresta skupaj.
Če pa želiš easy-way-out (aka hack, ne priporočam) pa za #leftBoxInner vstavi nek prazen div in mu določi clear: left(both). Ne pozabi mu določiti width in height (lahko tudi samo 1px).
IT Developer & Photography enthusiast.

iMark ::

Najlepša hvala Major.
Ta jquery izgleda super ampak imam že en problem.

V kolikor gre za preverjanje prvega polja deluje v redu, ko bi pa moralo preveriti drugo polje pa ne dela več. Kje sm narediw napako oz. kako bi moral pravilno napisat?

    <script>
		$("form").submit(function(){
			if($("input:first").val()== "") {
				$("span").text("Napačen vnos").show();
				$("input:first").css("border","1px dotted #ff0000");
				return false;
			}
			else if($("input:last").val()== "") {
				$("span").text("Napačen vnos").show();
				$("input:last").css("border","1px dotted #ff0000");
				return false;
			}
			else
				$("span").text("").show();
				return true;
		});
	</script>


Ubistvu bi to moralo že vsa polja (cca 10 jih je) v prvo prečekirat in javit napako za tista ki so napačna. Nekako bi morow postavit v prvi pogoj "and-e" -
if($("input:first").val()== "" && $("input:second").val()== "" ){

ampak potem ne vem kako nej mi da border samo na tista kjer je napaka...

Kar se pa tiče CSS-a je pa tko; tisto že res deluje kot si napisow v drugem postu, sam problem je da mam js na desni strani v #content še en div, ravno zato rabim met unga levga na float:left. In če dam clear se vsekakor pomakne vse na desni dol - se pa vsaj normalno višina "#contenta" spreminja. Pri drugih dicih tud ne upm dat float-ow ker bi vse zlezlo drugam kot mora.
Da si lahko predstavljate, stran mora izgledati tako:
 skica

skica


Problem je torej v tem, da modri okvir ne prilagaja višine izpisu queryja ampak gre čez - tako kot na spletni strani zgoraj.

Zgodovina sprememb…

  • spremenil: iMark ()

Major ::

Poskusi z each...

$("form").submit(function(){
        $("input").each(function(){
            if($(this).val() == ""){
                // ...
            }
        }


Glede CSSa boš moral dati link do strani, drugače ti ne bom mogel pomagati.
IT Developer & Photography enthusiast.

iMark ::

Sem malo ksn...
Tu je link do vzorca strani: klik.

Nočem preveč zahtevat od tebe (oz. vseh) vendar mi ne uspe to z jqueryjem. Kar si napisla zgoraj javi napako. Če slučajno kdo ve, kako bi naredil preverjanje vnosa za več kot eno pole ter da nato obrobi samo tisto polje kjer je napaka, bi lepo prosil, če mi lahko nekako pomaga. Da ne boste mislili, da nisem pregogalj in sam obrnil nekaj ur v temu, saj je tudi meni izziv, da ugotovim sam rešitev vndar zdaj je res nisem našel.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1298347330 (6467) sunniegoldie
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151950 (1678) kr?en
»

HTML in CSS težava pri razporeditvi DIV elementov

Oddelek: Izdelava spletišč
14978 (798) MisterR
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč
231597 (1300) jernejp
»

3 divi v divu in float

Oddelek: Izdelava spletišč
101754 (1638) alexa-lol

Več podobnih tem