Verificare Form

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
claUdiu
Mesaje: 313

Verificare Form

Buna:). Am si eu o intrebare. Deci...vreau sa verific un formular, si, cand un input nu este completat asa cum trebuie, atuncea sa ii apara o alerta cu un mesaj (chestia asta o stiti toti). DEci...eu am fact asta:

Cod: Selectaţi tot



<html>
<head>
<script type="text/javascript">

function verifica()
{
var text = document.getElementById('nume');

if (text.value.length < 3 || text.value.length > 15)
alert("Scrie in capul acela un text mai mare decat 3 caractere");
}

</script>

</head>

<body >
<form action="index.php" method="POST">
<input type="text" id="nume">
<input type="submit" value="Trimite" onClick="verifica()">
</form>
</body>

</html>
ASa...cand nu scriu bine in acel input imi apare mesajul care trebuie..(singurul din script:) ). Dar, cand dau pe OK, atuncea ma redirectioneaza pe index.php din action=""

Intrebarea mea e:

Cum pot sa fac sa nu ma redirectioneze? Si...cand toate camprile sunt corecte atncea sa ma duca direct spre index.php?:)

Ms mult!
Se spune ca...."omul tot invata in viata". Dar...Totusi...Trebie sa ne oprim undeva, nu?
MarPlo Mesaje: 4343
Salut
La formulare, in loc de onClick="verifica()" in butonul Submit, mai bine se adauga onsubmit="return verifica();" in tag-ul <form>.
Vezi cum este facut, si explicatiile din tutorialul Verificare si Validare caractere din formular.
claUdiu Mesaje: 313
Am incercat c onsubmit dar, acuma nu apare alert() si, tot ma redirectioneaza pe pagina din action=""
Se spune ca...."omul tot invata in viata". Dar...Totusi...Trebie sa ne oprim undeva, nu?
MarPlo Mesaje: 4343
Probabil fiindca sunt erori in codul JavaScrip. Incearca sa folosesti addon-ul FireBug la Mozilla Firefox ca sa depistezi erori JS.
Despre addon-ul FireBug gasesti mai multe pe net.
claUdiu Mesaje: 313
Salut!

Am si eu problema cu verificarea unui form. Am invatat cum sa fac, doar ca nici nu inteleg unde e erroarea.

Codul este acesta:

Cod: Selectaţi tot




<html> 
<head> 
<script type="text/javascript"> 
 
function verifica()
  {
 
var Title = document.getElementById("title");
var Keywords = document.getElementById("keywords");
var Content = document.getElementById("content");
 
if (Title.value.length <= 5){
alert("The filed Title, must have 5 characters!");
return false;
}else if(Title.value.length >= 15){
alert("The filed Title, must be beetwen 5 and 15 characters!");
return false;
}else if(Content.value.length <= 10){
alert("The field Content must have 10 characters!");
return false;
}
return true;
 
 
  }
</script> 
</head> 
<body> 
 
<form action="post.php" method="POST" onSubmit="return verifica()"> 
 
<h1>Title:</h1> 
<br/> 
<input type="text" name="title" /> 
 
<h1>Keywords</h1> 
<br/> 
<input type="text" name="keywords" /> 
 
<h1>Content:</h1> 
<br/> 
<textarea rows="5" cools="10"></textarea> 
 
<br/><br/> 
 
<input type="submit" name="trimite" value="Post!" /> 
&nbsp; &nbsp;
<input type="reset" value="Delete!" /> 
 
</form> 
</body> 
</html>
Are tot ce ii trebuie. Are return false; return true; onSubmit, functia, etc, dar, cand apas pe Post!, ma redirectioneaza pe pagina din action="". Chiar nu mai stiu unde sa ma uit... M smult
Se spune ca...."omul tot invata in viata". Dar...Totusi...Trebie sa ne oprim undeva, nu?
MarPlo Mesaje: 4343
Salut
In codul JavaScript preiei acele campuri cu getElementById(), dar campurile nu au setat un atribut "id".
Trebuie sa adaugi la fiecare caseta id-ul pe care-l specifici si in getElementById().
claUdiu Mesaje: 313
Multumesc mult MarPlo Se spune ca graba strica treaba, si chiar se intampla:)).

- dar cum fac sa imi accepte doar numere la keywords?:D
Se spune ca...."omul tot invata in viata". Dar...Totusi...Trebie sa ne oprim undeva, nu?
MarPlo Mesaje: 4343
Pentru a verifica sa accepte doar numere (ori si anumite caractere) se poate cu RegExp.

Cod: Selectaţi tot

var regx_chr = /^([0-9,\.]+)$/;
var valoare = formular.nume_camp.value;
if(valoare.search(regx_chr) == -1)) {
  alert('Adaugati valoare numerica');
}
evident Mesaje: 168
si mai e o problema.
cand dau submit imi da eroare daca bag litere la pret.dar daca dau ok scriptul meu tot merge adica ma duce la pagina de succes anuntul tau a fost adaugat.si pretul mi-l adauga in litere.cum sa fac sa se opreasca tot scriptul cand imi da eroarea ca pretul trebuie sa fie in numere?multumesc
MarPlo Mesaje: 4343
In tagul <form> se adauga onsubmit="return functieVerificare(this);".
Functia functieVerificare() e cea care face verificarea, in ea trebuie sa returneze ]false daca gaseste eroare (dupa alert()), ceea ce face ca "onsubmit" sa dea False si opreste trimiterea formularului.
Daca studiezi amanuntit tutorialul Verificare si Validare caractere din formular si testezi exemplu din el, intelegi procedeul.
evident Mesaje: 168
am asa:

Cod: Selectaţi tot

<script type="text/javascript"><!--
// RegExp care sa permite doar litere, numere si liniute "-", "_"
var regx_chr = /^([0-9,\.]+)$/;
var regx_mail = /^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4})$/;    // RegExp pt. adresa e-mail

// Functia care e apelata la "onsubmit"
// preia campurile din formular, verifica /valideaza datele adaugate
function checkForm(frm1) {
  var fre = false;             // variabila ce va fi returnata de functie

  // preluare casete formular
  var pret1 = frm1.pret1;
  var nrtel1 = frm1.nrtel1;
  var email1 = frm1.email1;

  // verificare valori (Nume, Parola, E-mail), daca sunt incorecte, returneaza alert si selecteaza casuta
  if(pret1.value.length<1 || pret1.value.length>9 || pret1.value.search(regx_chr)==-1) {
    alert('Pretul trebuie sa contina doar numere!');
    pret1.select();    // selecteaza casuta pt. Nume
  }
  else if(nrtel1.value.length<10 || nrtel1.value.length>30 || nrtel1.value.search(regx_chr)==-1) {
    alert('Numarul de telefon trebuie sa fie format din minim 10 si maxim 30 de numere!');
    nrtel.select();    // selecteaza casuta pt. Parola
  }
  else if(email1.value.search(regx_mail)==-1) {
    alert('Adaugati o adresa de e-mail corecta');
    email1.select();    // selecteaza casuta pt. E-mail
  }
  else fre = true;

  return fre;
}
--></script>
si in body am:

Cod: Selectaţi tot

<body>
<div align="center"><span class="style1"><strong>Completati toate radurile urmatoare</br>
  Poza nu este obligatorie</strong></span>
</div>
<table width="94%" border="1" align="center" cellspacing="3" bordercolor="#CC0000">
<form action="insert.php" method="post" enctype="multipart/form-data" onsubmit="return checkForm(this);">
  <tr>
    <td width="16%"><div align="right"><strong>Nume de contact: </strong></div></td>
    <td colspan="5"><input type="text" name="nume" /></td>
    <td width="7%"><strong> Sunteti:      </strong></td>
    <td width="26%"><strong>
      <input type="radio" name="sunteti" value="Persoana" />
Persoana</br>
  <input type="radio" name="sunteti" value="Companie" />
Companie
<label></label>
&nbsp;</strong></td>
  </tr>
  <tr>
    <td><div align="right"><strong>Categorie Anunt: </strong></div></td>
    <td colspan="7"><select name="categorie">
<option value="Afaceri">Afaceri</option>
<option value="Articole">Articole</option>
<option value="Animale">Animale</option>
<option value="Anticariat">Anticariat</option>
<option value="Arta-Antichitati">Arta si Antichitati</option>
<option value="Auto">Auto</option>
<option value="Calculatoare">Calculatoare</option>
<option value="Colectii">Colectii</option>
<option value="Constructii">Constructii</option>
<option value="Diverse">Diverse</option>
<option value="Donatii">Donatii</option>
<option value="Electrice">Electrice</option>
<option value="Foto">Foto</option>
<option value="Hobby">Hobby</option>
<option value="Imobiliare">Imobiliare</option>
<option value="Locuri-de-munca">Locuri de munca</option>
<option value="Moda">Moda</option>
<option value="Mobilier">Mobilier</option>
<option value="Moto-Velo">Moto Velo</option>
<option value="Media-Publicitate">Media Publicitate</option>
<option value="Muzica">Muzica</option>
<option value="Pierderi-Gasiri">Pierderi Gasiri</option>
<option value="Servicii">Servicii</option>
<option value="Sport">Sport</option>
<option value="Turism">Turism</option>
<option value="Telefoane">Telefoane</option>


</select>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Titlu Anunt: </strong></div></td>
    <td colspan="7"><input type="text" name="titluanunt" maxlength="87" />&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Text Anunt: </strong></div></td>
    <td colspan="7"><input style="width:250px;height:120px" type="text" name="textanunt" maxlength="255" />&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Pret:</strong></div></td>
    <td width="19%"><input type="text" name="pret" id="pret1"/>&nbsp;</td>
    <td width="11%">(<span class="style1">doar numere</span>) </td>
    <td width="7%"><div align="right"><strong>Moneda:</strong></div></td>
    <td colspan="4"><strong>
      <select name="moneda">
          <option value="RON">RON</option>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
            </select>
    </strong></td>
    </tr>
  <tr>
    <td><div align="right"><strong>Adresa e-mail:</strong></div></td>
    <td colspan="7"><input type="text" name="email" id="email1" />&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Numar de telefon:</strong></div></td>
    <td colspan="7"><input type="text" name="nrtel" id="nrtel1"/>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Judet:</strong></div></td>
    <td colspan="7"><select name="judet">
<option value="Alba">Alba</option>
<option value="Arad">Arad</option>
<option value="Arges">Arges</option>
<option value="Bacau">Bacau</option>
<option value="Bihor">Bihor</option>
<option value="Bistrita-Nasaud">Bistrita-Nasaud</option>
<option value="Botosani">Botosani</option>
<option value="Braila">Braila</option>
<option value="Brasov">Brasov</option>
<option value="Buzau">Buzau</option>
<option value="Calarasi">Calarasi</option>
<option value="Caras-Severin">Caras-Severin</option>
<option value="Cluj">Cluj</option>
<option value="Constanta">Constansa</option>
<option value="Covasna">Covasna</option>
<option value="Dâmbovita">Dâmbovita</option>
<option value="Dolj">Dolj</option>
<option value="Galati">Galati</option>
<option value="Giurgiu">Giurgiu</option>
<option value="Gorj">Gorj</option>
<option value="Harghita">Harghita</option>
<option value="Hunedoara">Hunedoara</option>
<option value="Ialomita">Ialomita</option>
<option value="Iasi">Iasi</option>
<option value="Ilfov">Ilfov</option>
<option value="Maramures">Maramures</option>
<option value="Mehedinti">Mehedinti</option>
<option value="Mures">Mures</option>
<option value="Neamt">Neamt</option>
<option value="Olt">Olt</option>
<option value="Prahova">Prahova</option>
<option value="Salaj">Salaj</option>
<option value="Satu Mare">Satu Mare</option>
<option value="Sibiu">Sibiu</option>
<option value="Suceava">Suceava</option>
<option value="Teleorman">Teleorman</option>
<option value="Timis">Timis</option>
<option value="Tulcea">Tulcea</option>
<option value="Vaslui">Vaslui</option>
<option value="Vâlcea">Vâlcea</option>
<option value="Vrancea">Vrancea</option>
</select>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Localitate:</strong></div></td>
    <td colspan="7"><input type="text" name="localitate"/>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right"><strong>Imagine</strong></div></td>
    <td colspan="7"><input type="file" name="uploaded_file" />&nbsp;</td>
  <tr>
  	<td><div align="right"><strong>Adauga codul din casuta rosie: </strong></div></td>
	<td><img src="captcha/captcha.php" alt="Please, write the code."  /></p>
	 	<input name="code" type="text" />	</td>
  </tr>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="7"><input type="submit" name="Submit" value="Adauga anunt" id="fsubmit"/></td>
  </tr>
  </form>
</table>
</body>
cand dau submit si nu e pus bine pretul imi da eroare, imi subliniaza casuta cu pretul
dar cand pun bine pretul si pun gresit nrtel dau submit,imi da eroarea dar scriptul nu se opreste.ma duce la pagina de succes.unde gresesc?
evident Mesaje: 168
Am gasit eroarea:D
Aici era

Cod: Selectaţi tot

else if(nrtel1.value.length<10 || nrtel1.value.length>30 || nrtel1.value.search(regx_chr)==-1) {
    alert('Numarul de telefon trebuie sa fie format din minim 10 si maxim 30 de numere!');
    nrtel.select();
}
(trebuia pus nrtel1)

MarPlo ai cumva un link sa ma uit si la tutorial cu formular de bifat?tot cum am facut si aici.
Poti sa imi spui cum fac acelasi lucru pentru formele de radio button si check button?
Multumesc:D