Contact formulier validatie

[rolfohtar]

Ik heb een contactform waar dit script onder draait.

// Contact form
$(document).ready(function() {
	$('form#contactform').submit(function() {
		$('form#contactform .error').remove();
		var hasError = false;
		$('.requiredField').each(function() {
			if(jQuery.trim($(this).val()) == '') {
				var labelText = $(this).prev('label').text();
				$(this).parent().append('<span class="error_text">You forgot to enter your '+labelText+'.</span>');
				hasError = true;
			} else if($(this).hasClass('email')) {
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val()))) {
					var labelText = $(this).prev('label').text();
					$(this).parent().append('<span class="error_text">You entered an invalid '+labelText+'.</span>');
					hasError = true;
				}
			}
		});
		if(!hasError) {
			$('form#contactform li.buttons button').fadeOut('normal', function() {
				$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading&hellip;" height="31" width="31" />');
			});
			var formInput = $(this).serialize();
			$.post($(this).attr('action'),formInput, function(data){
				$('form#contactform').slideUp("fast", function() {				   
					$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
				});
			});
		}
		
		return false;
		
	});
});

Nu heb ik hier twee problemen mee. De eerste is dat ik graag de output anders wil, als volgt:

<li><label for="contactName"><?php _e('Name', 'cc_language'); ?> *</label>
	<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
	<span class="error_text"><?php echo $nameError; ?></span>
</li>

Ik zou de output graag als volgt willen hebben:

<li><label for="contactName"><?php _e('Name', 'cc_language'); ?> *</label>
	<span class="error_sub">
		<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
	<span class="error_text"><?php echo $nameError; ?></span></span> 
</li>

Het tweede probleem is, dat het script ervoor zorgt dat elke keer als errors in de validatie zijn, dat het script een nieuwe regel toevoegt met de error melding. Dit moet natuurlijk maar één keer.

Wie kan mij hiermee helpen?

 

[wampier]

Qua tweede probleem: geen ".append" gebruiken om de errortext toe te voegen? Je eerste probleem begrijp ik niet zo goed je geeft twee voorbeelden, maar wat werkt er dan nu niet?

Als laatste een kleine opmerking: technisch gezien is je email regex niet meer van deze tijd. extensions langer dan 4 tekens zijn namelijk sinds 2010 toegestaan en uitgegeven. Nu zul je daat niet snel tegenaan lopen, maar het is technisch gezien niet meer courant

 

[rolfohtar]

Bedankt voor je reactie!

technisch gezien is je email regex niet meer van deze tijd. extensions langer dan 4 tekens zijn namelijk sinds 2010 toegestaan en uitgegeven.

Ik begrijp niet helemaal wat je hiermee bedoelt?

EDIT: Wanneer ik append vervang voor after, is er hetzelfde probleem. Het probleem lag ergens anders. Ik had de .error class aangepast, maar niet overal veranderd.

Wat betreft de tweede vraag was ik inderdaad niet helemaal duidelijk. De validatie voegt een het stukje code error_text toe. De output van de validatie is als volgt:

<li><label for="contactName"><?php _e('Name', 'cc_language'); ?> *</label>
    <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
    <span class="error_text"><?php echo $nameError; ?></span>
</li>

Ik zou graag willen dat de validatie ook voor de input een stukje code geeft, als volgt:

<li><label for="contactName"><?php _e('Name', 'cc_language'); ?> *</label>
    <span class="error_sub">
        <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
    <span class="error_text"><?php echo $nameError; ?></span></span> 
</li>

 

[wampier]

Ik ben niet zo goed in de mix JS en PHP dat ik direct het probleem kan zien. Wordt de PHP wel ge-escaped tussen die dubbele haken van "value"? Moeten die niet gewoon weg?

Wat betreft mijn opmerking over de email gaat het onderstreepte stuk in de regex:

/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/

Je maximum extensie voor een email wordt beperkt tussen 2 en 4 tekens. Maar langere extensies zijn tegenwoordig gewoon legaal zoals:

dirk.johnson@smithsonian.museum

nu zijn deze adressen zeer beperkt in algemeen gebruik (nog) maar je regex verbied ze wel