How is someone able to send this message through? (Email filtering question)

I'm a bit confused, and becoming increasingly concerned. I have an email Newsletter signup form found on this live site: http://rattletree.com/

Note if you go there, and try to click send without putting in at least some value, you get an error message. Also, I do not receive an email in that case. The only way I am able to get an email is if I put in some value. But for some reason, I am occasionally getting emails with empty values sent to me. It is pretty intermittant, and I assumed it is some bot somehow getting through my filters, but I'd really like to know how this is happening?

Here is the code:

<div class="outeremailcontainer">

<div id="emailcontainer">
    <form action="index_success.php" method="post" id="sendEmail" class="email">
    <h3 class="register2">Newsletter Signup:</h3>
    <ul class="forms email">
     <li class="name"><label for="yourName">Name: </label>
 <input type="text" name="yourName" class="info" id="yourName" value="" /><br />
</li>

<li class="city"><label for="yourCity">City: </label>
 <input type="text" name="yourCity" class="info" id="yourCity" value="" /><br />
</li>

      <li class="email"><label for="emailFrom">Email: </label>
         <input type="text" name="emailFrom" class="info" id="emailFrom" value="" />
                   </li>

       <li class="buttons email">

         <button type="submit" id="submit">Send</button>
         <input type="hidden" name="submitted" id="submitted" value="true" />
       </li>

    </ul>
  </form>
<div class="clearing">

<script type="text/javascript">
$(document).ready(function(){

 $('#emailFrom')
  .focus(function(){
   if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
   $('#sendEmail')

    .find('.name, .city').slideDown(300, function(){ $(this).show(); });
   $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
   $('<div id="overlay"></div>').appendTo('body');
  });

 $('#overlay').live('click', function(){
   $('#sendEmail')
    .css({ backgroundColor : 'transparent' })
    .find('.name, .city').slideUp(300);
   $('.outeremailcontainer').css({ position : 'static' });
   $('#overlay').remove();
  });

});
</script>

Here is the email validation:

    $(document).ready(function(){

 $('#emailFrom')
  .focus(function(){
   if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
   $('#sendEmail')

    .find('.name, .city').slideDown(300, function(){ $(this).show(); });
   $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
   $('<div id="overlay"></div>').appendTo('body');
  });

 $('#overlay').live('click', function(){
   开发者_运维技巧$('#sendEmail')
    .css({ backgroundColor : 'transparent' })
    .find('.name, .city').slideUp(300);
   $('.outeremailcontainer').css({ position : 'static' });
   $('#overlay').remove();
  });

});

$(document).ready(function(){
  $("#submit").click(function(){
    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;


    var emailFromVal = $("#emailFrom").val();

    if(emailFromVal == '') {
      $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
      hasError = true;

    } else if(!emailReg.test(emailFromVal)) {
      $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
      hasError = true;
    }

    var yourNameVal = $("#yourName").val();
    if(yourNameVal == '') {
        $("#yourName").after('<span class="error">You forgot to enter your name.</span>');
        hasError = true;
    }

    var yourCityVal = $("#yourCity").val();
    if(yourCityVal == '') {
        $("#yourCity").after('<span class="error">You forgot to enter your city.</span>');
        hasError = true;
    }
    if(hasError == false) {
      $(this).hide();
      $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
      $.post("/includes/sendemail.php",
//emailTo: emailToVal, 
           { emailFrom: emailFromVal, yourName: yourNameVal, yourCity: yourCityVal  },
             function(data){
            $("#sendEmail").slideUp("normal", function() {
              $("#sendEmail").before('<h3 class="register2">Success!</h3><p class="emailbox">You are on the Newsletter email list.</p>');
            });
             }
         );
    }
    return false;
  });
});

Your validation is based on JavaScript. Most bots don't use JavaScript, since they are not interested in dynamic contents. As a test, I disabled JavaScript with NoScript and was able to submit your form without entering anything.

Never trust your clients, you should do your validation on the server and serve an error page if the input is invalid.

It's simple - the end user simply disables JavaScript or uses one of the many developer plug-ins to disable/tweak your validation.

With forms like these, you really need to rely on server-side validation for an effective solution.

You may want to have a field validator on top of everything. There's this very good jQuery plugin Validation which has specific handlers for validating emails. Check it out here: http://docs.jquery.com/Plugins/validation

Validating the email, for example, would be easy as:

    $("#sendMail").validate({
        rules: {
            "emailFrom":{
                email:true
            }
        }
    });