Keskustelu: Nettisivujen teko: Lomakkeen merkkimäärän rajoitus

Hei, voisiko joku neuvoa aloittelijaa? Tarvitsisin palautelomakkeeseen javascript-koodin, joka rajoittaa viestin merkkimäärän esim. 1000 merkkiin - ja toisaalta tarkistaa, että kentäässä on jotain sisältöä. Olen yrittänyt vääntää koodia, mutta ei vaan onnistu. Tässä, mitä olen saanut tehtyä:

function ValidateMessage()
{
var message=document.lomake.message.value;

if(message.length<10)
{
alert("Et kirjoittanut viestiisi mitään tekstiä! (min. 10 merkkiä)");
form.message.focus();
return false;
}

if(message.length>1000)
{
alert("Viestin pituus on rajattu 1000 merkkiin!");
form.message.focus();
return false;
}
}

Mikä mättää?

Mod. lisäsi kooditagit!

Auttaminen on helpmpaa, jos näytät kokonaisen HTML-sivun jota voi testata.

Oletko laittanut niin, että koodia kutsutaan, kun lomake lähetetään? Esim.

<form onsubmit="ValidateMessage()">
...
</form>

Muuten tuota funktiota ei kutsuta koskaan. Tai onko lomakkeesi nimeksi asetettu "lomake"?

Tuya: Olet ilmeisesti luonut funktion copypaste-koodaamalla, sillä siinä on mm. form.message.focus() -kutsu, vaikkei form:ia ole määritelty. Älä kopioi koodeja, joiden toimintaa et ymmärrä.

Eki++: Tapahtumankäsittelijän pitäisi palauttaa ValidateMessagen paluuarvo.

Tässä on toimiva koodipohja:

function TarkastaLomake(lomake) {
	var viesti = lomake.viesti.value;
	if (viesti.length < 10) {
		alert("Et kirjoittanut viestiisi mitään tekstiä! (min. 10 merkkiä)");
		return false;
	}
	return true;
}

<form onsubmit="return TarkastaLomake(this)">
	<input name="viesti">
	<input type="submit" value="Lähetä">
</form>

-tossu-: Oikeassa olet. En ole tuolla plain-JS:llä räpeltänyt vähään aikaan, niin on päässyt vähän unohtumaan :)

Hei, olen todella aloittelija ja siksi kaipaankin kipeästi apua, jotta saisin tämän tehtyä. Tässä lomakekoodi:

<form name="lomake" action="required.php" method="post"onsubmit="return TarkastaLomake(this)" >


            <label>Nimi*</label>
            <input name="name" placeholder="Kirjoita tähän">

            <label>Sähköpostiosoite*</label>
            <input name="email" type="email" placeholder="Kirjoita tähän">

            <label>Viesti</label>
            <textarea name="message" placeholder="Kirjoita tähän"></textarea>

            <label>*Paljonko on 2+2? </label>
            <input name="human" placeholder="Vastaus">

            <input id="submit" name="submit" type="submit" value="Submit">

 </form>

Javascript on erillinen .js-tiedosto, joka on html-koodissa näin:

<script type="text/javascript" src="scripts12.js"></script>

js-tiedosto on nyt tällaisessa muodossa:

function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert(ôKorjaatko osoitteesi, kiitos!ö);
document.form1.text1.focus();
return false;
}


function TarkastaLomake(lomake)
{
var viesti = lomake.viesti.value;


if (viesti.length < 10)
{
alert("Et kirjoittanut viestiisi mitään tekstiä! (min. 10 merkkiä)");
return false;
}
return true;
}


if (viesti.length > 100)
{
alert("Viestin pituus on rajattu 100 merkkiin");
return false;
}
return true;
}
}

Mod. lisäsi kooditagit!

alert(ôKorjaatko osoitteesi, kiitos!ö);

Mitkä ihmeen ô ja ö tuossa on? Eikö siinä pitäisi olla lainausmerkit?

Luultavasti tiedostoa on muokattu jotain väärää merkistökoodausta käyttäen ja vääränlaisella editorilla – et kai ohjelmoi Wordilla? :D –, ja tekstin sekaan on siksi tullut jotkin väärät lainausmerkit, jotka nyt toisella editorilla näkyvätkin kirjaimina ô ja ö.

Toinen vika koodissa on, että ennen onsubmit-attribuuttia puuttuu välilyönti.

Kolmas vika on, että funktio TarkastaLomake sijaitsee funktion ValidateEmail sisällä. Tämä vika selviäisi, kun opettelisit sisentämään koodisi, kuten -tossu- esimerkissään on tehnyt. Samalla selviää, että osa TarkastaLomake-funktioon tarkoitetusta koodista on joutunut funktion ulkopuolelle ja että tiedoston lopussa on ylimääräinen }-merkki.

Neljäs ”vika” on, että et käytä lainkaan funktiota ValidateEmail. Funktiossa ei myöskään pitäisi olla viittausta document.form1.text1, vaan pitäisi käyttää vain parametrina annettavaa arvoa inputText. Toisaalta sähköpostiosoitteita ei edes kannata tarkistaa JavaScriptilla, vaan kannattaa asettaa kentän tyypiksi email, jolloin tarkistus tapahtuu nykyaikaisissa selaimissa automaattisesti.

Selaimen kehitystyökalujen virheilmoitukset varmasti olisivat paljastaneet montakin näistä ongelmista. Työkalut löytyvät selaimen valikosta tai usein F12-näppäimen takaa.

P.S. Käytäthän jatkossa kooditageja viesteissäsi!

Kiitos neuvoista. Yritän päästä eteenpäin ja opetella javascriptiä lisää, jotta ymmärrän mitä teen... nyt tuntuu olevan homma aika hakusessa :(

Tuya kirjoitti:

<form name="lomake" action="required.php" method="post"onsubmit="return TarkastaLomake(this)" >


            <label>Nimi*</label>
            <input name="name" placeholder="Kirjoita tähän">

Tuossa on oikeansuuntaista yritystä, mutta a) label-elementti pitäisi sitoa input-elementtiin for- ja id−määritteiden avulla, muuten label-merkkaus on hyödytön, b) pelkkä ”*” ei kerro mitään, se pitäisi selittää, ja lisäksi input-elementissä pitäisi olla required-määrite, jos kentän on tarkoitus olla pakollinen, c) tuollainen placeholder ei ole hyödyllinen eikä määritteen määritelmän mukainen; sopiva voisi olla placeholder="Etunimi Sukunimi", jos toivotaan käyttäjän kertovan nimensä tuossa järjestyksessä, d) input-kentän oletuspituus on vain 20 merkkiä, joten tähän tarvittaisiin esimerkiksi määrite size="40". Jos tämä tuntuu siltä, että tarvitsisit lomakkeiden perusteiden opiskelua, niin... se oli tarkoituskin. :-) Muissa kentissä on vastaavia ja muita ongelmia.

lainaus:

function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

Useimmat itse tehdyt tai netistä kopioidut meiliosoitteentarkistimet toimivat olennaisilla tavoilla väärin. Tämä ei ole poikkeus. Esimerkiksi ylimmän tason verkkotunnuksen rajaaminen 2- tai 3-merkkiseksi on ollut virheellistä jo kauan.

Kun käytät input-elementissä määritettä type=email, saat moderneissa selaimissa niin hyvän tarkistuksen kuin on mahdollista. Jos tämä ei riitä, kopioi oikeanlainen säännöllinen lauseke (joka on huomattavasti mutkikkaampi kuin yllä) luotettavasta lähteestä.

Mutta ihan ensimmäiseksi kannattaa tehdä lomakedatan tarkistus palvelinpäähän, siis tässä tapauksessa PHP-koodiin. Se tarvitaan joka tapauksessa ja kannattaa tehdä, jottei se unohdu tai jää muiden asioiden jalkoihin. Kun sitten olet lisäillyt HTML5:n mukaisia määritteitä, joilla asetetaan vaatimuksia kentille, voit välillä tehdä muuta ja palata koodaamaan lisätarkistuksia JavaScriptillä, jos aikaa ja todellista tarvetta on.

Textarea-elementille HTML5:n mukainen määrite, jolla rajataan syöte enintään 1000 merkkiin, on maxlength="1000", ja se toimii jo aika laajasti. Myös minlength="10" toimii melko hyvin.

Jos myöhemmin päädyt lisäämään JavaScript-tarkistuksen vanhoja selaimia varten ja ehkä toiminnallisuuden parantamiseksi, harkitse, missä vaiheessa tarkistukset tehdään. Käytettävyyden kannalta yleensä paras ratkaisu on, että jos textarea-kentällä on minimi- ja maksimipituus, niin sivulla on merkkimäärälaskuri, joka päivittyy joka syöttötoiminnosta, ja jokin näkyvä indikaattori siitä, onko tekstiä liian vähän, sopivasti vai liian paljon (tai, riippuen toimintalogiikasta, onko tekstiä maksimäärä niin, että enempää ei voi kirjoittaa). On jokseenkin turhauttavaa saada virheilmoitus vasta, kun lomaketta yrittää lähettää, varsinkin jos ilmoitus sanoo vain, että on liikaa, kertomatta paljonko liikaa.

P.S. Kysymys olisi kuulunut alueelle "Nettisivut ja -ohjelmointi".

Metabolix kirjoitti:

et kai ohjelmoi Wordilla? :D

Vähän offtopiciksi menee, mutta tuosta tulee mieleen, kun ohjelmointiurani alkuaikoina kopioin w3schoolsin sivuilta HTML- ja JavaScript-pätkiä lunttilapuksi word-tiedostoon, ja kehittelin samaisella ohjelmalla uuden ohjelmointikielenkin, joka näin jälkikäteen tuntuu ihan turhalta ja tyhmältä.

joo - eiköhän tyhmäkin tästä vähän viisastu - hyviä neuvoja! Onko teillä kokemusta tällaisesta sivustosta: http://www.codecademy.com/learn

Onko luotettavaa tietoa - kannattaako uhrata aikaa ja opiskella sen perusteella?

wordiin olen tosiaan kopionut noita koodinpätkiä ja sitten yrittänyt viritellä omia juttuja - ehkä ne vielä jonain päivänä aukeavat :)