使用javascript取消表单提交不起作用答案

【问题标题】：Form submission cancel using javascript not working使用javascript取消表单提交不起作用
【发布时间】：2013-09-30 13:42:39
【问题描述】：

目标：我制作了一个包含 3 个字段的表单，我想要那个如果表单中还剩下一个空字段表单，它被识别并打印错误消息（对于每个空字段）（不警告），并取消表单提交。错误消息最初是隐藏的，只有在字段为空时才可见。

问题：停止提交的代码不起作用。请发布任何错误。如果只使用alert()，它就可以工作，并删除显示和删除隐藏valaeFormOnSubmit() 和validateEmpty() 的代码。

表格：

<form action="start.php" method="post" onsubmit="return validateFormOnSubmit(this)" >
<table>
  <tbody>
  <tr>
     <td><label for="fname">Team Name:</label><br></td>
    <td><input name="fname"  type="text" autocomplete="off">&nbsp <div id="1"> Field is 
required 
</div></td>
  </tr>   
  <tr>
 <td><label for="contact">Contact 1 :</label> </td>
 <td><input type="text"  maxlength = "10" name="contact" > &nbsp<div id="2"> Field 
 is required </div></td>
  </tr>   
  <tr>
    <td><label for="contact2">Contact 2:</label> </td>
    <td><input type="text"  maxlength = "10" name="contact2" >&nbsp <div id="3"> Field is     
    required </div></td>
  </tr>  
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>
</form>

脚本

<script >
$(document).ready(function () {
            var i;
            for(i=1;i<=3;i++)
                {
                var k='#'+i;
                $(k).hide();}

            });

function validateFormOnSubmit(theForm) {
    var reason = "";

   reason += validateEmpty(theForm.fname,1);
   reason += validateEmpty(theForm.contact,2);
   reason += validateEmpty(theForm.contact2,3);

  if (reason != "") {

    return false;
  }
  return true;
  }

  function validateEmpty(fld,k) {
    var error = "";

    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "error";
        var k='#'+i;
        $(k).show();
    } else {
        fld.style.background = 'White';
        var k='#'+i;
            $(k).hide();
        }
        return error;  
    }
    </script>

【问题讨论】：

我的脚本错误 if (fld.value.length == 0) { fld.style.background = 'Yellow';错误='#'+k; //这里应该使用 k 而不是 i $(error).show(); // 这里应该使用 error 而不是 k } else { fld.style.background = 'White';错误='#'+k; //这里应该使用 k 而不是 i $(error).hide(); // 这里应该使用 error 而不是 k } return error; }

标签： javascript jquery html forms output

【解决方案1】：

我建议如下：

从 HTML 中删除 onsubmit="..."

以编程方式绑定到onsubmit 事件：

$(...).on("submit", validateFormOnSubmit);

相应地更改validateFormOnSubmit的签名：

function validateFormOnSubmit(event) {
    // use this instead of theForm
}

而不是返回false 做event.preventDefault()，即：
```
if (reason != "") {
    event.preventDefault();
}
```

【讨论】：

【解决方案2】：

这个呢？ http://jsfiddle.net/45Kfy/

<code>
  $(document).ready(function () {
               $("input").each(function(index, item)
               {
                   if ($(item).val().length == 0)
                   {
                      $(item).css("background-color", "red");
                   }
               });
           });
 </code>

您应该触发按钮单击，而不是 documentReady()。 (jQuery get the input value in an .each loop) 请注意，您的按钮也是一个输入字段。

【讨论】：