jquery contact form trouble

This is my form

<form id="formContact" name="formContact" method="post" action="#">
            <input id="name" name="name" type="text" value="Your name goes here..." />
            <input id="email" name="email" type="text" value="E-mail to reply..." />
            <textarea id="message" name="message" rows="" cols="">Your message goes here...</textarea>
            <input class="send" name="send" type="submit" value="Send" />
        </form>
    </div>
    <span class="clear"></span>
</div>
<script type="text/javascript" src="jquery.js"></script>

i have a contact.js page but no php form, how do i validate this so when you press send it sends to set email address ?

THIS IS MY CONTACT.JS FORM PAGE

$().ready(function(){
    //global vars
    var name = $("#name");
    var nameText = "Your name goes here...";
    var email = $("#email");
    var emailText = "E-mail to reply...";
    var message = $("#message");
    var messageText = "Your message goes here...";

    //Form validation
    $("#formContact").submit(function(){
        if(!validateName() | !validateEmail() | !validateMessage()){
            return false;
        }
    });

    //Functions
    function validateEmail(){
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(filter.test(a)){
            $("#email").removeClass("error");
            return true;
        }
        else{
            $("#email").addClass("error");
        开发者_高级运维    return false;
        }
    }
    function validateName(){
        if(name.val().length < 4){
            name.addClass("error");
            return false;
        }
        else{
            name.removeClass("error");
            return true;
        }
    }
    function validateMessage(){
        if(message.val().length < 4){
            message.addClass("error");
            return false;
        }
        else{
            message.removeClass("error");
            return true;
        }
    }

    //Some interaction with inputs & textarea
    //name
    name.focus(function(){
        if($(this).attr("value") == nameText) $(this).attr("value", "");
    });
    name.blur(function(){
        if($(this).attr("value") == "") $(this).attr("value", nameText);
    });
    //email
    email.focus(function(){
        if($(this).attr("value") == emailText) $(this).attr("value", "");
    });
    email.blur(function(){
        if($(this).attr("value") == "") $(this).attr("value", emailText);
    });
    //message
    message.focus(function(){
        if($(this).attr("value") == messageText) $(this).attr("value", "");
    });
    message.blur(function(){
        if($(this).attr("value") == "") $(this).attr("value", messageText);
    });
});

ohh boy!

why are you having so much trouble with javascript? Javascript is made to be fun! when you are not having fun, something you're doing is WRONG!

try this:

<form id="formContact" name="formContact" method="post" action="#">
    <input id="name" class="required" type="text" value="Your name goes here..." />
    <input id="email" class="required email" type="text" value="E-mail to reply..." />
    <textarea id="message" class="required" rows="" cols="">Your message goes here...</textarea>
    <input type="submit" value="Send" class="send" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>

Note: check the class attributes and I also added jQuery Validation plugin

if you want to use your own error messages, use:

$("form").validate({
   messages: {
     required: "We need your email address to contact you",
     email: "Your email address must be in the format of name@domain.com"
   }
});

if you want to validate the form manually, just call valid()

if(  $("form").valid() ) ...

Added

to post this into your page, just do:

$("form").bind("submit", function () {

   // let's add a loading spinner
   $(".send").addClass("loading");

   // let's send it
    $.ajax({
      type: "POST",
      url: "myReceiveMessagePage.php",
      data: $("form").serialize(),
      success: function() {
          // everything went smooth...
          $(".send").addClass("done");
      },
      error: function() { 
          // dang!
          alert("something went wrong...");
      },
      complete: function() { 
          // let's remove the fancy loading spinner
          $(".send").removeClass("loading");
      }
    });

});

this will post all values to myReceiveMessagePage.php and you can get all values in that page as a POST.

In this file you use a email object to send the email. You can't send emails using javascript only, you always need a server language for this like PHP, ASP.NET, perl, etc. Plenty of examples for sending emails out there in the web.

The browser can't just "send an email", you need to either submit to a server-side script that will send the email or alternatively you can ask the browser to open the user's email program with the To, Subject, and Body set using a mailto: link.

This example shows how to use a mailto: link with the subject and body.