Toon posts:

formulier controle javascript

Pagina: 1
Acties:
  • 105 views sinds 30-01-2008

donderdag 19 april 2007 11:21

Acties:

Verwijderd

Topicstarter
Ik ben bezig met een opdracht in html / javascript
De bedoeling is dat de velden met een asterix worden gecontroleerd. mochten 1 van deze velden niet ingevult zijn, moet die een error geven.

het script hoeft niet verstuurd te worden! Enkel gecontroleerd!

Onderaan het script staat "de uitgebreide uitleg". Hopelijk kan iemand me helpen _/-\o_

============================================


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>formulier web2b</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="index,nofollow"/>
<meta name="author" content="Manno Bult"/>
<meta name="copyright" content="Hanzehogeschool Groningen"/>
<meta name="description" content="Hanzehogeschool groningen, ICM, WEB2b toets" />

<link rel="stylesheet" href="file:///H|/__TENTAMEN_JAVASCRIPT/opdracht/css/main.css" media="screen">

<!--[if IE ]>
<style type="text/css">
/* YUGH IE... */
legend{
display: none;
}
#explanation{
position: absolute;
}
</style>
<![endif]-->

</head>

<body>

<div id="container">

<form action="" method="get" name="contact" id="contact">

<!--
************************************************

fieldset met NAW gegevens

-->
<fieldset id="naw">
<legend>naw</legend>

<div>
<label for="firstname">Voornaam:</label>
<input id="firstname" name="firstname" class="correct" type="text" tabindex="1" value="">
<span class="required" id="firstname_comm">*</span>
</div>

<div>
<label for="name">Achternaam:</label>
<input id="name" name="name" class="correct" type="text" tabindex="2" value="">
<span class="required" id="name_comm">*</span>
</div>

<div>
<label for="street">Straat/huisnummer:</label>
<input id="street" name="street" class="correct" type="text" tabindex="3" value="">
<span class="required" id="street_comm">*</span>
</div>

<div>
<label for="zip">Postcode:</label>
<input id="zip" name="zip" class="correct" type="text" tabindex="4" value="" size="7" maxlength="7">
<span class="required" id="zip_comm">*</span>
</div>

<div>
<label for="city">Woonplaats:</label>
<input id="city" name="city" class="correct" type="text" tabindex="5" value="">
<span class="required" id="city_comm">*</span>
</div>

<div>
<label for="country">Land:</label>
<select name="country" id="country">

<option value="---">Kies een land</option>

<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="ALG">Algeria</option>
<option value="ASA">American Samoa</option>
<option value="AND">Andorra</option>
<option value="ANG">Angola</option>

<option value="AGU">Anguilla</option>
<option value="AB">Antigua and Barbuda</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ARU">Aruba</option>
<option value="ACI">Ashmore and Cartier Islands</option>

<option value="AUS">Australia</option>
<option value="AU">Austria</option>
<option value="AZE">Azerbaijan</option>
<option value="BA">Bahamas</option>
<option value="BRN">Bahrain</option>
<option value="BEN">Bangladesh</option>

<option value="BS">Barbados</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
<option value="BLZ">Belize</option>
<option value="DY">Benin</option>
<option value="BER">Bermuda</option>

<option value="BHU">Bhutan</option>
<option value="BOL">Bolivia</option>
<option value="BH">Bosnia and Herzegovina</option>
<option value="BOT">Botswana</option>
<option value="BR">Brazil</option>
<option value="BIO">British Indian Ocean Territory</option>

<option value="BVI">British Virgin Islands</option>
<option value="BRU">Brunei</option>
<option value="BUG">Bulgaria</option>
<option value="UV">Burkina Faso</option>
<option value="BUR">Burma</option>
<option value="BUD">Burundi</option>

<option value="CAM">Cambodia</option>
<option value="CAO">Cameroon</option>
<option value="CD">Canada</option>
<option value="CV">Cape Verde</option>
<option value="CI">Cayman Islands</option>
<option value="CAR">Central African Republic</option>

<option value="CHA">Chad</option>
<option value="CHI">Chile</option>
<option value="CH">China (People's Republic)</option>
<option value="CIS">Christmas Island</option>
<option value="CCI">Coco (Keeling) Islands</option>
<option value="COM">Colombia</option>

<option value="COI">Comoro Island</option>
<option value="CNB">Congo, Democratic Republic of</option>
<option value="CNG">Congo, Republic of</option>
<option value="CKI">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CRO">Croatia</option>

<option value="CUB">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZR">Czech Republic</option>
<option value="DEN">Denmark</option>
<option value="DJI">Djibouti</option>
<option value="DCA">Dominica</option>

<option value="DOM">Dominican Republic</option>
<option value="TMP">East Timor</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="ES">El Salvador</option>
<option value="EQG">Equatorial Guinea</option>

<option value="ERI">Eritrea</option>
<option value="EST">Estonia</option>
<option value="ETH">Ethiopia</option>
<option value="FAU">Falkland Islands</option>
<option value="FRI">Faroe Islands</option>
<option value="FIJ">Fiji</option>

<option value="FIN">Finland</option>
<option value="FR">France</option>
<option value="FGU">French Guiana</option>
<option value="FP">French Polynesia</option>
<option value="G">Gabon</option>
<option value="GAM">Gambia</option>

<option value="GS">Gaza Strip</option>
<option value="GEO">Georgia</option>
<option value="FRG">Germany</option>
<option value="GH">Ghana</option>
<option value="GIB">Gibraltar</option>
<option value="GRC">Greece</option>

<option value="GRE">Greenland</option>
<option value="GDA">Grenada</option>
<option value="GDL">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GUA">Guatemala</option>
<option value="GUE">Guernsey</option>

<option value="GUI">Guinea</option>
<option value="GB">Guinea-Bissau</option>
<option value="GUY">Guyana</option>
<option value="HAI">Haiti</option>
<option value="HON">Honduras</option>
<option value="HK">Hong Kong SAR</option>

<option value="HUN">Hungary</option>
<option value="ICE">Iceland</option>
<option value="IND">India</option>
<option value="INO">Indonesia</option>
<option value="IRN">Iran</option>
<option value="IRQ">Iraq</option>

<option value="IRE">Ireland</option>
<option value="MIO">Isle of Man</option>
<option value="ISR">Israel</option>
<option value="IT">Italy</option>
<option value="IC">Ivory Coast</option>
<option value="JAM">Jamaica</option>

<option value="JAP">Japan</option>
<option value="JER">Jersey</option>
<option value="JOR">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KEN">Kenya</option>
<option value="KIR">Kiribati</option>

<option value="KUW">Kuwait</option>
<option value="KYR">Kyrgyzstan</option>
<option value="LAO">Laos</option>
<option value="LAT">Latvia</option>
<option value="LEB">Lebanon</option>
<option value="LES">Lesotho</option>

<option value="LIB">Liberia</option>
<option value="LI">Libya</option>
<option value="LIE">Liechtenstein</option>
<option value="LIT">Lithuania</option>
<option value="LUX">Luxembourg</option>
<option value="MAC">Macau</option>

<option value="REM">Macedonia, Republic of</option>
<option value="MAD">Madagascar</option>
<option value="MAL">Malawi</option>
<option value="MA">Malaysia</option>
<option value="MLD">Maldives</option>
<option value="MAI">Mali</option>

<option value="M">Malta</option>
<option value="MIS">Marshall Islands</option>
<option value="MRT">Martinique</option>
<option value="MAU">Mauritania</option>
<option value="MAR">Mauritius</option>
<option value="MEX">Mexico</option>

<option value="MIC">Micronesia, Federated States</option>
<option value="MDV">Moldova</option>
<option value="MON">Monaco</option>
<option value="MGL">Mongolia</option>
<option value="MTS">Montserrat</option>
<option value="MOR">Morocco</option>

<option value="MOZ">Mozambique</option>
<option value="NAM">Namibia</option>
<option value="NAU">Nauru</option>
<option value="NEP">Nepal</option>
<option value="NET">Netherlands</option>
<option value="DWI">Netherlands Antilles</option>

<option value="NCA">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NIC">Nicaragua</option>
<option value="NI">Niger</option>
<option value="NIG">Nigeria</option>
<option value="NII">Niue</option>

<option value="NIS">Norfolk Island</option>
<option value="KOR">North Korea</option>
<option value="NMI">Northern Mariana Islands</option>
<option value="NOR">Norway</option>
<option value="OM">Oman</option>
<option value="PAK">Pakistan</option>

<option value="PAL">Palau</option>
<option value="PAN">Panama</option>
<option value="PNG">Papua New Guinea</option>
<option value="PAR">Paraguay</option>
<option value="PE">Peru</option>
<option value="PHI">Philippines</option>

<option value="PIT">Pitcairn Islands</option>
<option value="POL">Poland</option>
<option value="POR">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QTR">Qatar</option>
<option value="SNM">Republic of San Marino</option>

<option value="REU">Reunion</option>
<option value="RUM">Romania</option>
<option value="RUS">Russia</option>
<option value="RWA">Rwanda</option>
<option value="SKN">Saint Kitts and Nevis</option>
<option value="SLU">Saint Lucia</option>

<option value="SPM">Saint Pierre and Miquelon</option>
<option value="SVG">Saint Vincent and Grenadines</option>
<option value="WSM">Samoa</option>
<option value="SA">Saudi Arabia</option>
<option value="SEN">Senegal</option>
<option value="SER">Serbia And Montenegro</option>

<option value="SEY">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SIN">Singapore</option>
<option value="SLO">Slovakia</option>
<option value="SLV">Slovenia</option>
<option value="SOL">Solomon Islands</option>

<option value="SOM">Somalia</option>
<option value="SOA">South Africa</option>
<option value="SK">South Korea</option>
<option value="SP">Spain</option>
<option value="CL">Sri Lanka</option>
<option value="SUD">Sudan</option>

<option value="SUR">Surinam</option>
<option value="SVA">Svalbard</option>
<option value="SWA">Swaziland</option>
<option value="SWE">Sweden</option>
<option value="SWI">Switzerland</option>
<option value="SYR">Syria</option>

<option value="TAI">Taiwan</option>
<option value="TAJ">Tajikistan</option>
<option value="TAN">Tanzania</option>
<option value="THA">Thailand</option>
<option value="TOG">Togo</option>
<option value="TOK">Tokelau</option>

<option value="TON">Tonga</option>
<option value="TT">Trinidad & Tobago</option>
<option value="TUN">Tunisia</option>
<option value="TUR">Turkey</option>
<option value="TUK">Turkmenistan</option>

<option value="TCI">Turks and Caicos Islands</option>
<option value="TUV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UKR">Ukraine</option>
<option value="UAE">United Arab Emirates</option>
<option value="UK">United Kingdom</option>

<option value="USA">United States of America</option>
<option value="UR">Uruguay</option>
<option value="UZB">Uzbekistan</option>
<option value="VAN">Vanuatu</option>
<option value="HS">Vatican City (Holy See)</option>
<option value="VEN">Venezuela</option>

<option value="VN">Vietnam</option>
<option value="VI">Virgin Islands</option>
<option value="WAF">Wallis and Futuna</option>
<option value="WB">West Bank</option>
<option value="WSA">Western Sahara</option>
<option value="ADN">Yemen</option>

<option value="YUG">Yugoslavia (Historical)</option>
<option value="CNK">Zaire</option>
<option value="ZAM">Zambia</option>
<option value="ZMB">Zimbabwe</option>
</select>
<span class="required" id="country_comm">*</span>
</div>

</fieldset>

<!--
************************************************

fieldset met inloggegevens

-->
<fieldset id="login">
<legend>inloggegevens</legend>

<div>
<label for="usrname">gebruikersnaam:</label>
<input id="usrname" name="usrname" class="correct" type="text" tabindex="3" value="">
<span class="required" id="usrname_comm">*</span>
</div>

<div>
<label for="pwd">wachtwoord:</label>
<input id="pwd" name="pwd" class="correct" type="password" tabindex="3" value="">
<span class="required" id="pwd_comm">*</span>
</div>

<div>
<label for="pwd2">bevestig wachtwoord:</label>
<input id="pwd2" name="pwd2" class="correct" type="password" tabindex="3" value="" onChange="alert(this.value)">
<span class="required" id="pwd2_comm">*</span>
</div>

</fieldset>

<!--
************************************************

fieldset met email adres en andere digitalia

-->
<fieldset id="digital">
<legend>digitalia</legend>

<div>
<label for="email">email adres:</label>
<input id="email" name="email" class="correct" type="text" tabindex="11" value="">
<span class="required" id="email_comm">*</span>
</div>

<div>
<label for="website">website:</label>
<input id="website" name="website" type="text" tabindex="12" value="">
</div>

<div>
<span class="sublabel">stuur mij een nieuwsbrief over:</span>
<div id="newsletter">
<div>
<label for="adb">Adobe</label>
<input id="adb" name="tools" type="checkbox" tabindex="13" value="adobe">
</div>
<div>
<label for="ms">Microsoft</label>
<input id="ms" name="tools" type="checkbox" tabindex="14" value="microsoft">
</div>
<div>
<label for="int">Internet</label>
<input id="int" name="tools" type="checkbox" tabindex="15" value="internet">
</div>
<div>
<label for="lnx">Linux</label>
<input id="lnx" name="tools" type="checkbox" tabindex="16" value="linux">
</div>
</div>
</div>

</fieldset>

<!--
************************************************

fieldset met knoppen

-->
<fieldset id="controls">
<legend>controls</legend>
<input type="reset" value="wis formulier" />
<input type="submit" value="verstuur" />
</fieldset>

</form>

</div>

<!--
------------------------------------------------
-
- Het stuk hieronder hoeft niets aan te gebeuren.
-
- Dit is het stuk met de uitleg van de toets
-
------------------------------------------------
-->

<div id="explanation" class="explanationopen">

<div id="openclose">

<input type="button" id="opcl" value="open/dicht" onClick="document.getElementById('explanation').className=='explanationopen'?document.getElementById('explanation').className='explanationclosed':document.getElementById('explanation').className='explanationopen';"></div>

<h1>Toelichting</h1>
<p>In het formulier op deze pagina staat een aantal verplicht in te vullen velden en een aantal dat eventueel leeggelaten kan worden door de bezoeker. De verplicht in te vullen velden zijn gemarkeerd met een rode asterisk (<span class="required">*</span>)</p>
<p>JavaScript moet controleren of de verplichte velden juist zijn ingevoerd. Dit betekent: de verplichte velden zijn niet leeg, en het emailadres bevat een @ en een . (punt).</p>
<p>Ook moet het script controleren of beide ingevoerde passwords identiek zijn. </p>
<p>Het formulier dient zo te werken dat:</p>
<ul>
<li>het <em>niet</em> verstuurd wordt als het formulier niet juist is ingevuld</li>
<li>het wel verstuurd wordt als het formulier juist is ingevuld</li>
<li>wanneer JavaScript uit zou staan in de browser van de gebruiker het formulier ook verstuurd moet kunnen worden (gebruik het onsubmit event).</li>
</ul>
<p>De HTML-code moet blijven zoals die is op het toevoegen van enkele attributen en eventhandlers na.</p>
<p>In het geven van feedback aan de gebruiker ben je vrij, ook al wordt een grotere gebruikersvriendelijkheid beter gewaardeerd. Voor in totaal een bonuspunt kun je het script ook laten controleren of er checkboxjes zijn geselecteerd en zo ja, welke.</p>

</div>

</body>
</html>

donderdag 19 april 2007 11:23

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 18-11 20:27

Sappie

De Parasitaire Capaciteit!

Heel je code hier neerpleuren en dan verwachten dat wij er mee aan de slag gaan...

Als ik hier voor de moderators mag spreken; wat heb je al geprobeerd? Doe eens wat moeite :) En plaats je html in het vervolg tussen code tags.

Specs | Audioscrobbler

donderdag 19 april 2007 11:25

Acties:
  • NMe
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

Wij gaan hier niet je huiswerk voor je maken, sorry. :) Vraag je leraar maar om uitleg, dan leer je er misschien ook nog eens wat van. ;)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Dit topic is gesloten.

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq