problema con formulario ajax

[loka-por-racing]

buenos días! estoy intentando hacer funcionar un formulario en HTML5 pero no encuentro el porque al hacer click en "enviar" me figura error en el formulario, pero en realidad no da error, ya que se recibe el formulario en el mail. espero puedan darme una mano para ver donde se esta produciendo el error, copio a continuación los códigos:

contacto.html

Código HTML:

<form id="contact-form" name="contact-form" action="php/envio.php" method="post"/>
        <div class="success" id="ajaxsuccess">Formulario enviado correctamente!<br />
          <strong>gracias por contactarse.</strong> </div>
        <fieldset>
        <label class="name">
        <input type="text" value="Nombre:" name="name" id="name" placeholder="Nombre:"  
onfocus="if(this.value == 'Nombre:') this.value='';" onblur="if(this.value == '') this.value='Nombre:';" required />
        <span class="empty" id="err-name">*requerido</span> </label>
        <label class="email">
        <input type="text" value="E-mail:" name="email" id="email" placeholder="E-mail:" 
 onfocus="if(this.value == 'E-mail:') this.value='';" onblur="if(this.value == '') this.value='E-mail:';" required />
        <span class="empty" id="err-email">*requerido</span> <span class="error" id="err-emailvld">*email no válido</span></label>
        <label class="phone">
        <input type="text" value="Telefono:" name="phone" id="phone" placeholder="Telefono:"  
onfocus="if(this.value == 'Telefono:') this.value='';" onblur="if(this.value == '') this.value='Telefono:';" required />
        <span class="empty" id="err-phone">*requerido</span></label>
        <label class="message">
        <textarea name="message" id="message" 
onfocus="if(this.value == 'Mensaje:') this.value='';" onblur="if(this.value == '') this.value='Mensaje:';">Mensaje:</textarea>
        <span class="empty" id="err-message">*requerido</span> </label>
        <button id="send" class="button" type="submit">Enviar</button>
        <div>
            	<div class="error" id="err-form">Ocurrio un error con el formulario. Por favor intente nuevamente!</div>
            	<div class="error" id="err-timedout">El tiempo de conexion con el servidor se termino!</div>
            	<div class="error" id="err-state"></div>
        </div>
        </fieldset>
      </form> 

función.js (es la que llama cuando hace clic en "Enviar")

Código:

$('#send').click(function(){ // when the button is clicked the code executes
		$('.error').fadeOut('slow'); // reset the error messages (hides them)

		var error = false; // we will set this true if the form isn't valid

		var name = $('input#name').val(); // get the value of the input field
		if(name == "" || name == " " || name == "Nombre:") {
			$('#err-name').fadeIn('slow'); // show the error message
			error = true; // change the error state to true
		}

		var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
		var email = $('input#email').val().toLowerCase(); // get the value of the input field
		if (email == "" || email == " " || email == "E-mail:") { // check if the field is empty
			$('#err-email').fadeIn('slow'); // error - empty
			error = true;
		}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
			$('#err-emailvld').fadeIn('slow'); // error - not right format
			error = true;
		}
		
		var tel = $('input#phone').val(); // get the value of the input field
		if(tel == "" || tel == " " || tel == "Telefono:") {
			$('#err-phone').fadeIn('slow'); // show the error message
			error = true; // change the error state to true
		}
    
		var message = $('textarea#message').val(); // get the value of the input field
		if(message == "" || message == " " || message == "Mensaje:") {
			$('#err-message').fadeIn('slow'); // show the error message
			error = true; // change the error state to true
		} 

		if(error == true) {
			$('#err-form').slideDown('slow');
			return false;
		}

		var data_string = $('#contact-form').serialize(); // Collect data from form
		//alert(data_string);

		$.ajax({
			type: "POST",
			url: $('#contact-form').attr('action'),
			data: data_string,
			timeout: 6000,
			error: function(request,error) {
				if (error == "timeout") {
					$('#err-timedout').slideDown('slow');
				}
				else {
					$('#err-state').slideDown('slow');
					$("#err-state").html('ocurrio un error: ' + error + '');
				}
			},
			success: function() {
				//$('#contact-form').slideUp('slow');
				$('#ajaxsuccess').slideDown('slow');
        $('#ajaxsuccess').delay(4000);
        $('#ajaxsuccess').fadeOut(1000);

        $("#name").val('');
        $("#email").val('');
		$("#phone").val('');
        $("#message").val('');
		$('.error').fadeOut('slow');
		}
		});

		return false; // stops user browser being directed to the php file
	}); // end click function

envio.php

Código PHP:

  <?PHP
if (isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["message"])){
    $dest = "[email protected]";
    $head = "From: [email protected]\r\n";
    $head.= "To: [email protected]\r\n";
    // Ahora creamos el cuerpo del mensaje
    $msg.= "Mensaje enviado desde www.dominio.com\n";
    $msg.= "------------------------------- \n";
    $msg.= "NOMBRE:   ".$_POST['name']."\n";
    $msg.= "EMAIL:    ".$_POST['email']."\n";
    $msg.= "TEL:      ".$_POST['phone']."\n";
    $msg.= "------------------------------- \nMENSAJE:\n";
    $msg.= $_POST['message']."\n\n";
    $msg.= "------------------------------- \n";
    // Finalmente enviamos el mensaje
    if (mail($dest, "CONTACTO", $msg, $head)) {
        //envio correcto
    } else {
        //error
    }
}
?>   

espero alguien pueda darme una mano. Este mismo código lo probé en otra web y funciona sin inconvenientes es por eso que no logro ver que es lo que me genera ese error ($("#err-state").html('ocurrio un error: ' + error + '');
).
saludos!

[alberto510a]

Te recomiendo usar console.log() infórmate sobre este método te resultará muy útil para encontrar errores.

[autonotel]

Siempre te mostrará un error aunque no lo haya. El formulario se envía sin errores pero lo único que hace es mostrarlo.
error: function(request,error) {
if (error){
if (error == "timeout") {
$('#err-timedout').slideDown('slow');
}
else {
$('#err-state').slideDown('slow');
$("#err-state").html('ocurrio un error: ' + error + '');
}
}
}

Algo así. Que te haya funcionado en otra web puede ser por múltiples razones.

[loka-por-racing]

autonotel, intente con lo que me dijiste pero sigue pasando lo mismo. No se me ocurre que puede ser lo que esta generando que no tome como exitoso el envío.
alberto510a voy a ver que onda eso que me indicas. me esta volviendo loca!! :P