Verificare caractere din formular / style JavaScript

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

Verificare caractere din formular / style JavaScript

Buna ziua localhost!
Ma numesc Razvan si ma adresez pe site-ul meu preferat de invatat HTML, CSS si JS pentru a cere un script care sa poata la inregistrarea unui membru sa blocheze, sa nu permita unele caractere precum % ^ & ( ) [ ] si altele, si sa mai poata seta numarul maxim de caractere si minim... De exemplu sa se poata inregistra utilizatori care au de la 3 caractere in username pana la 17... :D

As mai dori sa se scrie cu alta culoare (nu cu cea neagra, default) in input-ul de logare...
Multumesc, numai bine ;)
MarPlo Mesaje: 4343
Salut
Vezi poate iti e de folos tutorialul Verificare si Validare caractere din formular, e prezentat un exemplu cum se verifica caracterele si numarul lor in casutele text din formular.
La pagina Script Utilizatori - Inregistrare si Autentificare / Logare e un script de inregistrare.

Ca sa modifici aspectul unui buton (culoare, text, marime), ii poti aplica un atribut "id":

Cod: Selectaţi tot

<input type="submit" name="submit" value="Send" id="un_id" />
,
Apoi la acel "un_id" se definesc proprietati in CSS:

Cod: Selectaţi tot

#un_id { color:#0102da; }
Bizzar Mesaje: 49
Despre id sau class stiu foarte bine!
Insa, am deschis intentionat acest subiect la sectiunea pentru JavaScript ;)
Sper ca este posibil de facut asa ceva si prin javascript! :D
Cat despre php => folosesc un host gratuit la care nu am acces la php, imi pare rau :(
Formula HTML:

Cod: Selectaţi tot

<input class="post" type="text" name="username" value="{USERNAME}" size="25" maxlength="25" />
Insa, vreau prin JS sa pot realiza asa ceva...
Stiu ca exista prin JS ceva de genul: get element by id...
Multumesc, numai bine!
claUdiu Mesaje: 313

Cod: Selectaţi tot

<script type="text/javascript">
var nume = document.getElementById('id_din_form_HTML');
document.write(nume.value);
</script>
Ceva de genu? Nu ai spus ca vrei sa preiei datele din form.
Se spune ca...."omul tot invata in viata". Dar...Totusi...Trebie sa ne oprim undeva, nu?
Bizzar Mesaje: 49
Deci, stiu ca este ceva de genul:

Cod: Selectaţi tot

<script>function footer () {a = document.getElementById("gfooter").innerHTML;document.getElementById("gfooter").innerHTML = a + '<br /><center><b>CONTINUTUL IN FOOTER!</b></center>';}</script><body onload="footer()">
Totusi nu vreau ceva de genul inner html ci vreo schimbare prin css... un style in js...
dar cel mai important acum pentru mine este numarul maxim & minim de caractere, si caractere care sa nu se permita in timpul inregistrarii...

multumesc oricum pentru raspuns. ;)
MarPlo Mesaje: 4343
In tutorialul din link-ul dat in raspunsul de mai la inceput e prezentat exemplu cum se verifica numarul de caractere.
Petru setare stiluri CSS din JavaScript se foloseste formula:
document.getElementById('idul').style.numeStilCSS = 'valoare';

Cod: Selectaţi tot

// exemplu, culoare si marime font
document.getElementById('un_id').style.color = '#0708da';
document.getElementById('un_id').style.fontSize = '16px';
Bizzar Mesaje: 49
Mersi mult MarPlo, trebuie sa le verific :P
Apropo, ce inseamna frm1 ?

Deci, uite ce am primit:

Cod: Selectaţi tot

<script type="text/javascript"><!--
// Pentru a permite doar litere, numere si liniute "-", "_"
var regx_chr = /^([a-zA-Z0-9_-]+)&#36;/;

// Functia care e apelata la "onsubmit"
// Preia campurile din formularul template-ului, verifica datele adaugate
function checkForm(frm1) {
  var fre = false;             // Variabila ce va fi returnata de functie

  // Preluare casete formular
  var username = frm1.username;

  // Verificare valoarea numelui de utilizator, daca sunt incorecte, returneaza alert si selecteaza casuta
  if(username.value.length<3 || username.value.length>14 || username.value.search(regx_chr)==-1) {
    alert('Numele trebuie sa contina intre 3 si 14 caractere nNumere, Litere, "-" si "_"');
    username.select();    // Selecteaza casuta pentru nume
  }
  else fre = true;

  return fre;
}
--></script>
si:

Cod: Selectaţi tot

<td class="row2"><input class="post" type="text" name="username" value="{USERNAME}" size="25" maxlength="25" /></td>
E bine asa?
MarPlo Mesaje: 4343
"frm1" e numele parametrului in care e retinut ce se transmite la functia "checkForm(frm1)" cand e apelata. Poate fi si alt nume, nu conteaza, e ca un nume de variabila.
Inlocuieste caracterele "&#36;" cu "$" , sa fie asa: /^([a-zA-Z0-9_-]+)$/;
Daca functioneaza, e bine.
Bizzar Mesaje: 49
Imi pare foarte rau dar nu functioneaza :(
MarPlo Mesaje: 4343
In tag-ul <form> unde sunt casetele text trebuie adaugat: onsubmit="return checkForm(this);" , ca sa returneze rezultatul functiei ca se trimit datele.
Am testat codul urmator si functioneaza.

Cod: Selectaţi tot

<form action="" method="post" onsubmit="return checkForm(this);">
 <input class="post" type="text" name="username" value="{USERNAME}" size="25" maxlength="25" />
 <input type="submit" value="Trimite" />
</form>
<script type="text/javascript"><!--
// Pentru a permite doar litere, numere si liniute "-", "_"
var regx_chr = /^([a-zA-Z0-9_-]+)$/;

// Functia care e apelata la "onsubmit"
// Preia campurile din formularul template-ului, verifica datele adaugate
function checkForm(frm1) {
  var fre = false;             // Variabila ce va fi returnata de functie

  // Preluare casete formular
  var username = frm1.username;

  // Verificare valoarea numelui de utilizator, daca sunt incorecte, returneaza alert si selecteaza casuta
  if(username.value.length<3 || username.value.length>14 || username.value.search(regx_chr)==-1) {
    alert('Numele trebuie sa contina intre 3 si 14 caractere nNumere, Litere, "-" si "_"');
    username.select();    // Selecteaza casuta pentru nume
  }
  else fre = true;

  return fre;
}
--></script>
Bizzar Mesaje: 49
E bine ca ati incercat sa ma ajutati dar problema e de la host, nu am acces la totul!
Iar privind caracterele colorate, multumesc! :D

Subiecte similare