JavaScript Kontaktformular mit JQuery Probleme

[jimi7777]

Hallo erstmal,

ich habe vor ein Kontaktformular + JavaScript Validation zu erstellen mithilfe von JQuery (da ich es ohnehin schon für andere Funktionen brauche) zu erstellen. Es funktioniert auch soweit ganz gut (ich habe es teilweise aus Tutorials, da meine Kenntnisse in Sachen Programmieren sehr beschränkt sind).

Meine Probleme sind, dass das Formular auch wenn der Default-Text noch da ist abgeschickt wird und falls ein Feld nicht ausgefüllt ist oder die E-Mail Adresse inkorrekt ist, die Schrift schwarz/grau ist anstatt Rot zu werden (Der Rahmen ist Rot)

Formcode

<form id="contactform" name="contactform">
	<table>
	  	<tr>
	 		<td><input type="text" id="name" name="name" value="The name" class="start_form"></td>
	  	<td rowspan="4"><button type="submit" name="send" id="submit_button"></button></td>
	   	</tr>
	   	<tr>
	   		<td><input type="text" id="email" name="email" value="The e-mail" class="start_form"></td>
	   	</tr>
	   	<tr>
	   		<td><input type="text" id="subject" name="subject" value="The subject" class="start_form"></td>
	   	</tr>
	  	<tr>
	  	<td>
	   		<textarea id="message" name="message" class="start_form">Here comes the message..</textarea>
	   	</td>
	   	</tr>
		</table>
</form>

CSS

#error {
	color:red;
	font-size:10px;
	display:none;
}
.needsfilled 
{
	border:thin solid #cf0000;
}

.start_form
{
	color:#555;
}

$(document).ready(function(){
	// Place ID's of all required fields here.
	required = ["name", "email", "subject", "message"];
	// If using an ID other than #email or #error then replace it here
	email = $("#email");
	errornotice = $("#error");
	// The text to show up within a field when it is incorrect
	emptyerror = "Please fill out this field";
	emailerror = "Please enter a valid e-mail";

	$('.start_form').each(function() {
    var default_value = this.value;
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', '#222');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#555');
            this.value = default_value;
        }
    });
    
});


	$("#contactform").submit(function(){	
		//Validate required fields
		for (i=0;i<required.length;i++) {
			var input = $('#'+required[i]);
			if ((input.val() == "") || (input.val() == emptyerror)) {
				input.addClass("needsfilled");
				input.val(emptyerror);
				errornotice.fadeIn(750);
			} else {
				input.removeClass("needsfilled");
			}
		}
		// Validate the e-mail.
		if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
			email.addClass("needsfilled");
			email.val(emailerror);
		}

		//if any inputs on the page have the class 'needsfilled' the form will not submit
		if ($(":input").hasClass("needsfilled")) {
			return false;
		} else {
			errornotice.hide();
			return true;
		}
	});
	
	// Clears any fields in the form when the user clicks on them
	$(":input").focus(function(){		
	   if ($(this).hasClass("needsfilled") ) {
			$(this).val("");
			$(this).removeClass("needsfilled");
	   }
	});
});

Ich hoffe Ihr könnt mir helfen! Die JQuery Version die ich eingebunden habe ist 1.7.1.min. Soweit ich weiß die Aktuelle. Falls Ihr noch weiteren Code braucht. Einfach Bescheid geben! Danke!!

 

[Keepers]

Eine Validierung clientseitig löst aber nicht das Problem, dass jemand das Ziel direkt ansteuern kann und deine clientseitige Validierung überspringt.

 

[jimi7777]

Ich weiß, jedoch sollte es mal als erste Stufe dienen. Außerdem wird dieses Kontaktformular nicht für besonders wichtige Nachrichten verwendet. Falls Information falsch angelangt ist es kein Drama.

Aber ich werde mich später noch um die passende PHP-Validation kümmern. Ich möchte fürs erste die Clientseitige zum Laufen bringen.

 

[Keepers]

Ja, ich verstehe das. Der Einwand dazu ist auch nicht, dass dort keine wichtigen Nachrichten versendet werden, sondern selten die Serverseitige Konfiguration dann verhindert dass die Ansteuerung von Remote einige hunderttausend Mails in der Sekunde versendet.

Aber das ist zu Off Topic, ich wollte das nur als Denkanstoß mitgeben.

 

[NullPointer]

Kann es sein, dass du gar nicht prüfst, ob der Inhalt der Eingabefelder der Default-Text ist?

 

[jimi7777]

@Keepers ja. stimmt, darüber werde ich mir noch ein paar Gedanken machen!

@NullPointer mit var default_value = this.value speichere ich ja den Default-Text. Und später frage ich mit einer if-schleife "this.value == default_value". Das ist ziemlich weit oben.

 

[supaburn]

hihi er hat "if-schleife" gesagt nix für ungut...