jQuery:当表单有错误时,脚本不会阻止提交函数被触发

时间:2014-02-20 00:30:01

标签: javascript jquery forms

基本上,如果默认值仍然存在,我试图让表单清除提交时的所有输入字段。然后,如果仍存在默认值,则停止提交过程。表单清除提交中的字段,但不会停止提交按钮执行,就像它的假设一样。请帮我解决这个问题。我自己写了这篇文章,并且还在试图弄清楚它为什么不起作用。

下面的jQuery脚本:

<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>

以下HTML代码:

      <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> 

1 个答案:

答案 0 :(得分:1)

你的checkInput方法没有返回任何内容,你从每个回调函数返回值而不是CheckInput方法。

$(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;
        }
    });
});