jQuery: Script isn't preventing submit function from firing when form has errors

Question

Essentially, I am trying to have my form clear all input fields on submit if the default values are still present. Then if there are default values still present, then the submit process is stopped. The form clears the fields on submit, but wont stop the submit button from executing like its suppose to. Please help me out on this. I wrote this myself, and still trying to figure out why it isn't working.

The jQuery Script Below:

<script type="text/javascript" >
 $(document).ready(function(){
    $(".forms").each(function(){
        var DefaultValue = $(this).value;
    $("#Form_1").submit(function(){
        if ( CheckInput() == "empty" ){
                 return false;
              }
    }); 
    function CheckInput(){
        var x = '';
        $(".forms").each(function(){
        if ($(this).value == DefaultValue){
             this.value = '';
             var y = "empty";
             return y;
          }
        x = y;
        return x;   
      });
    }
    });
 });
</script>

The HTML code below:

      <form id="Form_1">
      <table>
              <tr>
                  <td>
                      <table cellpadding="2" cellspacing="3" width="500px">
                          <tr>
                              <td>
                              <div class="InputContainer">
                                  <input  name="FirstName" value="First Name" class="forms" type="text"required="true"  ></input>
                                  <div class="InfoBlurp">First Name<div class="InfoTip"></div></div></div>
                              </td>
                              <td>
                              <div class="InputContainer">
                                  <input  name="BirthDate" value="Birth Date(MM/DD/YYYY)" class="forms" type="text" required="true" ></input>
                                  <div class="InfoBlurp">Birth Date(MM/DD/YYYY)<div class="InfoTip"></div></div></div>
                              </td>
                              <td>
                              <div class="InputContainer">
                                  <input  name="Email" value="Email@sample.com" validType="email" class="forms" type="text" required="true"/></input>
                                  <div class="InfoBlurp">Email@sample.com<div class="InfoTip"></div></div></div>
                              </td>
                          </tr>
          </table>
          <input id="Button_1"  class="topopup" type="submit" value="" style="background-color: #FFFFFF; border:none; cursor:pointer;">
          </form> 

Answer 1

Your checkInput method is not returning anything, you are returning values from the each callback function not from the CheckInput method.

$(document).ready(function () {
    $(".forms").each(function () {
        var DefaultValue = $(this).value;
        $("#Form_1").submit(function () {
            if (CheckInput() == "empty") {
                return false;
            }
        });

        function CheckInput() {
            var x = '';
            $(".forms").each(function () {
                if ($(this).value == DefaultValue) {
                    this.value = '';
                    x = "empty";
                    //return false to stop further iteration of the loop
                    return false;
                }
            });
            return x;
        }
    });
});