Formularz z komentarzem
Interesujące i praktyczne rozwiązanie. Jeden z zastosowanych tutaj skryptów wyświetla objaśnienia do kolejnych pól formularza a drugi sprawdza czy nie użyto wulgaryzmów
W sekcji head wstaw kod:
| <SCRIPT language=JavaScript> <!-- var numberOfWords = 32; var message = "Proszę nie używać wulgaryzmów!"; var isProfane = new makeArray(numberOfWords); var word = new makeArray(numberOfWords); function checkForProfanity(usersInput) { var temp = usersInput; temp = temp.toLowerCase(); for (var j = 1; j <= numberOfWords; j++) { isProfane[j] = temp.indexOf(word[j]); } for (var j = 1; j <= numberOfWords; j++) { if (isProfane[j] != -1) { alert("Proszę zmienić wyraz \'"+word[j]+"\' na inny."); usersInput = message; j = numberOfWords + 1; } else {} } return usersInput; } function makeArray(n) { this.length = n for (var i = 1; i<=n; i++) { this[i] = new String(); } return this; } //--> </SCRIPT> |
W sekcji body wstaw:
| <SCRIPT language=JavaScript> <!-- word[1] = "wulgaryzm"; word[2] = "kolejny wulgaryzm"; word[3] = "kolejny wulgaryzm"; word[4] = "kolejny wulgaryzm"; word[5] = "kolejny wulgaryzm"; word[6] = "kolejny wulgaryzm"; word[7] = "kolejny wulgaryzm"; word[8] = "kolejny wulgaryzm"; word[9] = "kolejny wulgaryzm"; word[10] = "kolejny wulgaryzm"; word[11] = "kolejny wulgaryzm"; word[12] = "kolejny wulgaryzm"; word[13] = "kolejny wulgaryzm"; word[14] = "kolejny wulgaryzm"; word[15] = "Proszę nie używać wulgaryzmów!"; word[16] = "kolejny wulgaryzm"; word[17] = "kolejny wulgaryzm"; word[18] = "kolejny wulgaryzm"; word[19] = "kolejny wulgaryzm"; word[20] = "kolejny wulgaryzm"; word[21] = "kolejny wulgaryzm"; word[22] = "kolejny wulgaryzm"; word[23] = "kolejny wulgaryzm"; word[24] = "kolejny wulgaryzm"; word[25] = "kolejny wulgaryzm"; word[26] = "kolejny wulgaryzm"; word[27] = "kolejny wulgaryzm"; word[28] = "kolejny wulgaryzm"; word[29] = "kolejny wulgaryzm"; word[30] = "kolejny wulgaryzm"; word[31] = "kolejny wulgaryzm"; word[32] = "kolejny wulgaryzm"; function testBox1(form) { Ctrl = form.imie; if (Ctrl.value == "") { validatePrompt (Ctrl, "Proszę podać imię.") return (false); } else return (true); } //--------- function testBox2(form) { Ctrl = form.nazwisko; if (Ctrl.value == "") { validatePrompt (Ctrl, "Proszę podać nazwisko.") return (false); } else return (true); } //--------- function testBox3(form) { Ctrl = form.email; if (Ctrl.value == "" || Ctrl.value.indexOf ('@', 0) == -1) { validatePrompt (Ctrl, "Proszę podać adres e-mail.") return (false); } else return (true); } //--------- function testBox4(form) { Ctrl = form.haslo; if (Ctrl.value.length > 10) { validatePrompt (Ctrl, "Proszę podać hasło.") return (false); } else return (true); } //--------- function testBox5(form) { Ctrl = form.phaslo; if (Ctrl.value.length > 10) { validatePrompt (Ctrl, "Proszę ponownie podać hasło.") return (false); } else return (true); } //--------- function runSubmit (form, button) { if (!testBox1(form)) return; if (!testBox2(form)) return; if (!testBox3(form)) return; if (!testBox4(form)) return; if (!testBox5(form)) return; alert ("Formularz wypełniony poprawnie."); document.test.submit(); return; } //--------- function validatePrompt (Ctrl, PromptStr) { alert (PromptStr) Ctrl.focus(); return; } function loadDoc() { // initial focus; use if needed //document.test.key.focus (); return; } // --> </SCRIPT> <SCRIPT language=JavaScript> function changeTip(a,b,c,d,e,f,g,h) { if (a.style.display =='') { a.style.display = 'none'; } else { a.style.display=''; b.style.display='none'; c.style.display='none'; d.style.display='none'; e.style.display='none'; f.style.display='none'; g.style.display='none'; h.style.display='none'; } } function showDefault() { tip.style.display=''; } function showKey() { key.style.display=''; linkKey.style.textDecoration='none'; linkKey.style.cursor='hand'; linkKey.style.color='#ff0000'; linkKey.style.fontWeight='normal'; linkKey.style.letterSpacing='normal'; } function showCat() { cat.style.display=''; linkCat.style.textDecoration='none'; linkCat.style.cursor='hand'; linkCat.style.fontWeight='normal'; linkCat.style.color='#ff0000'; } function showMfg() { mfg.style.display=''; linkMfg.style.textDecoration='none'; linkMfg.style.cursor='hand'; linkMfg.style.fontWeight='normal'; linkMfg.style.color='#ff0000'; } function showSms() { Sms.style.display=''; linkSms.style.textDecoration='none'; linkSms.style.cursor='hand'; linkSms.style.fontWeight='normal'; linkSms.style.color='#ff0000'; } function showMfgPart() { mfgPart.style.display=''; linkMfgPart.style.textDecoration='none'; linkMfgPart.style.cursor='hand'; linkMfgPart.style.fontWeight='normal'; linkMfgPart.style.color='#ff0000'; } function showMax() { max.style.display=''; linkMax.style.textDecoration='none'; linkMax.style.cursor='hand'; linkMax.style.fontWeight='normal'; linkMax.style.color='#ff0000'; } function showMin() { min.style.display=''; linkMin.style.textDecoration='none'; linkMin.style.cursor='hand'; linkMin.style.fontWeight='normal'; linkMin.style.color='#ff0000'; } function hideDefault() { tip.style.display='none'; } function hideKey() { key.style.display='none'; linkKey.style.textDecoration='none'; linkKey.style.cursor='hand'; linkKey.style.color='#000000'; linkKey.style.fontWeight='normal'; linkKey.style.letterSpacing='normal'; } function hideCat() { cat.style.display='none'; linkCat.style.textDecoration='none'; linkCat.style.cursor='hand'; linkCat.style.fontWeight='normal'; linkCat.style.color='#000000'; } function hideMfg() { mfg.style.display='none'; linkMfg.style.textDecoration='none'; linkMfg.style.cursor='hand'; linkMfg.style.fontWeight='normal'; linkMfg.style.color='#000000'; } function hideSms() { Sms.style.display='none'; linkSms.style.textDecoration='none'; linkSms.style.cursor='hand'; linkSms.style.fontWeight='normal'; linkSms.style.color='#000000'; } function hideMfgPart() { mfgPart.style.display='none'; linkMfgPart.style.textDecoration='none'; linkMfgPart.style.cursor='hand'; linkMfgPart.style.fontWeight='normal'; linkMfgPart.style.color='#000000'; } function hideMax() { max.style.display='none'; linkMax.style.textDecoration='none'; linkMax.style.cursor='hand'; linkMax.style.fontWeight='normal'; linkMax.style.color='#000000'; } function hideMin() { min.style.display='none'; linkMin.style.textDecoration='none'; linkMin.style.cursor='hand'; linkMin.style.fontWeight='normal'; linkMin.style.color='#000000'; } </SCRIPT> |
W ramach znacznika body wstaw:
| <BODY onload=loadDoc()> |
W linijkach:
word[2] = "kolejny wulgaryzm"; wpisz słowa których nie chcesz by używano do wypełnienia formularza.
Na koniec budujemy formularz:
opis pola formularza widoczny po lewej stronie:
| <DIV id=linkKey onclick=showKey();hideCat();hideMfg();hideSms();hideMfgPart();hideMax();hideMin();hideDefault(); style="CURSOR: hand"><font face="verdana,arial,helvetica" size="2" color="#FFFFCC">Imię</font> </DIV> |
pole formularza:
| <INPUT maxLength=50 name=imie onblur="this.value = checkForProfanity(this.value);" onfocus=showKey();hideCat();hideMfg();hideSms();hideMfgPart();hideMax();hideMin();hideDefault();> |
objaśnienie pojawiające się po prawej stronie w momencie klikniecia na opis po lewej stronie lub ustawieniu kursora w polu formularza:
| <DIV id=key style="DISPLAY: none"><FONT face=verdana,arial,helvetica size=2><B>Imię</B><BR>Wpisz swoje imię w odpowiednie miejsce w formularzu.</FONT></DIV> |
