Archief - dropdown box validatie

dask · 5 jan 2013

Hopelijk kan iemand mij helpen, want ik vind geen oplossing online. Mijn kennis van het javascript is praktisch nihil en is er alleen in het aanpassen van bestaande code.

Ik heb een webform ingesteld volgens dit type:How to Create A Multi-Step Signup Form With CSS3 and jQuery | webexpedition18

In de html bij de 3de stap, heb ik een dropdownkeuze menu aangemaakt:
html:

Code:

 <!-- #third_step -->
            <div id="third_step">
                <h1><span>Stap 3 op 4: </span>Gegevens over de terugrit</h1>
			<div class="form">
					<select ="dropdown" name="dropdown" style="height: auto">
						<option value="0">Kies...</option>
						<option value="area1">Terugrit ingeven</option>
						<option value="area2">Geen terugrit</option>
					</select>
						 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
					</div>	 
					<div id="divarea1" class="box">
						<div class="form">
							<input type="text" id="datepicker2" />
							<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
							<input type="text" placeholder="Type in an address" name="terugrit vertrek adres" id="terugrit_vertrek_adres" value="terugrit vertrek adres" />
							<label for="terugrit_vertrek_adres">Het adres waar u wordt opgehaald. </label>
							<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
							<input type="text" placeholder="Type in an address" name="terugrit bestemming adres" id="terugrit_bestemming_adres" value="terugrit bestemming adres" />
							<label for="terugrit_bestemming_adres">Het adres waar u wordt afgezet. </label> 
							<!-- clearfix --><div class="clear"></div><!-- /clearfix -->
							<input id="find2" type="button" class="button" value="valideren" style="width:auto; padding: 0 5px" />
							
						</div> 
					</div>
					<div id="divarea2" class="box">U verkiest geen terugrit.</div>
					
              
                 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
		<input class="back" type="button" value="" />
                <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />
                
            </div>

Met een scriptje om de velden zichtbaar te maken indien nodig:

Code:

$(document).ready(function(){
			$('.box').hide();
			$('#dropdown').change(function() {
				$('.box').hide();
				$('#div' + $(this).val()).show();
			});
		});

Nu zit het probleem in het validatiegedeelte jquery.main.js

Code:

 $('#submit_third').click(function(){
		//remove classes
        $('#third_step input').removeClass('error').removeClass('valid');
		
        var fields = $('#third_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

....
});

Bovenaan het script worden de variabele fields gedefinieerd:

Code:

$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'datepicker2' : 'datum',
            'terugrit_vertrek_adres' : 'terugrit vertrek adres',
	    'terugrit_bestemming_adres' : 'terugrit bestemming adres',
	    'dropdown' : 'area1',
	    'dropdown' : 'area2'
    };

Hoe kan ik de validatie van de dropdownbox implementeren in dit javascript?

Archief - dropdown box validatie

dask

Legacy Member