使用javascript取消表單提交無法正常工作

Question

目標：我已經制作了一個包含3個字段的表單，我希望如果表單中只剩下一個空字段，它會被識別並打印一條錯誤消息（每個空字段）（不提醒），然后提交表單取消。 錯誤msg最初是隱藏的，並且僅當字段為空時才應使其可見。

問題：停止提交的代碼不起作用。 請發布任何錯誤。 如果僅使用alert（），它可以工作，並刪除代碼以顯示和刪除隱藏的validaeFormOnSubmit（）和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>

Answer 1

我建議以下內容：

• 從您的HTML中刪除onsubmit="..."

• 以編程方式綁定到onsubmit事件：

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

• 相應地更改validateFormOnSubmit的簽名：

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

• 而不是返回false來做event.preventDefault() ，即：

   if (reason != "") { event.preventDefault(); } 

Answer 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在.each循環中獲取輸入值 ）並且要注意，您的按鈕也是輸入字段。