formulier controle met waarschuwing

[ysabel]

Beste mensen,

Na uren zoeken en testen heb ik helaas nog steeds niet kunnen vinden wat ik nodig heb.
Vandaar deze oproep... ;-)

Ik ben op zoek naar een formulier controle welk controleert of velden zijn ingevuld, en een waarschuwing geeft wanneer er een veld ontbreekt.
Daar is genoeg voor te vinden, maar....
wat ik eigenlijk nodig heb, is dat er een waarschuwing komt wanneer er een veld wordt gemist, echter... dat de gebruiker TOCH het formulier kan opslaan met de ingevulde gegevens, inclusief het ontbrekende veld.

Zie het als een soort van waarschuwing.
Als gebruik klikt op 'versturen' en er ontbreekt een veld, moet er een waarschuwing volgen in de trant van ' weet je zeker dat je (b.v.) je geboortedatum niet wilt opgeven ?
Als er op Ja wordt geklikt, dan formulier gewoon versturen incl. de ingevulde en niet ingevulde data en opslaan.
Als er op Nee wordt geklikt, dan terug naar het formulier zodat alsnog eea kan worden ingevuld.

Is dat mogelijk en waar kan ik een dergelijk script vinden ?

Alvast erg bedankt !

Ysabel

 

[csshunter]

Hoi Ysabel,

Is dat mogelijk?

Ja, het is mogelijk!

En waar kan ik een dergelijk script vinden?

Hier!

• Test: multiple-confirm.htm
  javascript: zie broncode.

Toelichting

• Wat je wilt, is eigenlijk dat er telkens bij een niet-ingevuld onverplicht vakje een confirm dialoogje komt zodra je op de Verzend-knop klikt.
• Maar ook bij niet-ingevulde wel-verplichte velden zal er een signaal moeten komen.
• De standaard alert-box en confirm-box lenen zich hier niet zo goed voor, omdat de alerts (voor de verplichte velden) en de confirms (voor de niet-verplichte velden) niet door elkaar heen mogen lopen, en de confirms na elkaar moeten komen. Bovendien zien de standaard alert- en confirm-box er in elke browser anders uit, ze staan meestal midden in het browservenster, en bv. bij Firefox zijn ze nog erg lelijk ook.
• Daarom zijn met javascript "custom pop-ups" gemaakt, die met css naar behoefte zijn te stylen.
• De zichtbare "Verzend" knop is geen echte, maar een fake-submit.
• Het is een button die alleen de controlefuncties oproept.
• Eerst worden de verplichte velden langsgelopen. Als daar één bij zit die nog leeg is, komt er een pop-up "Svp alle verplichte velden invullen": met alleen een OK knop, want je moet altijd terug naar het formulier.
• Zijn alle verplichte velden in orde (althans: niet leeg! *), dan komen de niet-verplichte velden aan de beurt. Als daar één bij zit die nog leeg is, komt er een pop-up "OK met niet invullen?", met de keuze Ja of Nee.
• Bij Nee ga je terug naar het formulier, bij Ja wordt het volgende niet-verplichte veld gecheckt.
• Als alle niet-verplichte velden geweest zijn, en ofwel gevuld zijn, ofwel bevestigd zijn in het leeg blijven, dan komt pas de echte submit-knop ten tonele: "Nu alles verzenden".

De html ziet er eenvoudig uit:

<form method="post" action="verzonden.htm">
	<p><em>Naam .........................: *  </em><input id="veld1" type="text" size="20" /></p>
	<p><em>Adres .........................:   </em><input id="veld2" type="text" size="20" /></p>
	<p><em>Woonplaats...................:     </em><input id="veld3" type="text" size="20" /></p>
	<p><em>e-mail ........................: * </em><input id="veld4" type="text" size="20" /></p>
	<p><em>Lengte grote teen .........:       </em><input id="veld5" type="text" size="20" /> (in cm)</p>
	<p><em>Snoep per dag ..............:      </em><input id="veld6" type="text" size="20" /> (in kg)</p>

	<div id="dialoogbox">
		<input type="button" value="Verzenden" onclick="checkVerplicht();" />
		<div id="dialoog"></div>
	</div>
</form>

<p>* = verplicht in te vullen</p>

Wat hier de pagina "verzonden.html" heet, wordt dan de afhandelingspagina op de server.
De invulling voor het javascript kan ook eenvoudig zijn:
[JS]// *************************************** in te vullen gegevens: ********************************* //
var verplicht=new Array('veld1','veld4');
var dialoogTextVerplicht='Vul s.v.p. alle verplichte vakjes in';

var onverplicht=new Array('veld2','veld3','veld5','veld6');
var dialoogTextOnverplicht=new Array();
dialoogTextOnverplicht[0]='U heeft geen adres ingevuld. Toch verzenden?';
dialoogTextOnverplicht[1]='U heeft geen woonplaats ingevuld. Toch verzenden?';
dialoogTextOnverplicht[2]='U heeft geen grote teen ingevuld. Toch verzenden?';
dialoogTextOnverplicht[3]='U heeft geen snoep ingevuld. Nu alles verzenden?';

// ***************************** hierna javascript-zelfbediening! ********************************* //
enz.
[/JS]
Komt dit in de buurt?

Met vriendelijke groet,
CSShunter
___________
*) Er kan ook nog een controle op de inhoud van de ingevulde velden bij gemaakt worden, bv. is het een echt e-mail adres? Zijn er letters ingevuld als het letters moeten zijn, en getallen als het getallen moeten zijn? Enz.
Maar: dit alles is alleen maar service aan de bezoekers!
De echte controle van het ingevulde formulier zal server-side met php moeten plaatsvinden in de afhandelingspagina (waar je van buitenaf niet in kunt komen), zodat "kwaadwillenden" niet de server kunnen hacken en vergiftigen met malware, of een flinke portie spam in je mailbox kunnen droppen.