基本表單驗證不起作用

Question

這種簡單的表單驗證無法正常工作，這很煩我。 請讓我知道是什么問題。 我已經嘗試了將近兩個小時的錯誤，但是找不到它。 請幫我。

看一下代碼：

 function validate() { if( $("#full_name").val() == "" ) { alert( "Please provide your name!" ); $("#full_name").focus() ; return false; } if( $("#email").val() == "") { alert( "Please provide your Email!" ); $("#email").focus() ; return false; } if( $("#message").val() == "" ) { alert( "Please Enter Message" ); return false; } return( true ); } 

 <div class="form"> <h2> Contact Us </h2> <form name="c_form" action="#" method="post" onsubmit="return(validate());"> <div class="input"> <input type="text" name="full_name" id="full_name" placeholder="Full Name"> </div> <div class="input"> <input type="text" name="email" id="email" placeholder="Email Address"> </div> <div class="input textarea"> <textarea id="message" name="message" placeholder="Enter Message Here"></textarea> </div> <div class="input button"> <button id="button"> Send </button> </div> </form> </div> 

Answer 1

為什么不使用HTML5的本機“必需”屬性？ 如今，大多數瀏覽器都會很樂意地對其進行解釋，而不會出現任何問題。 如果您想支持較舊的瀏覽器，只需使用h5validate之類的庫，但是（請）保持html干凈。

使用這些屬性查看相同的表單。 沒有JS，沒有DIV容器，只是普通的本地HTML：

 input, textarea { display:block; margin-bottom: 5px; } 

 <h2> Contact us without JS </h2> <form name="c_form" action="#" method="post"> <input type="text" name="full_name" placeholder="Full Name" required> <input type="email" name="email" placeholder="Email Address" required> <textarea name="message" placeholder="Enter Message Here" required></textarea> <button type="submit"> Send </button> </form> 

Answer 2

我進行了一些更改，它可以正常工作。 以下代碼段：

1. 包括jQuery。
2. 將所有內容添加到$(function () {}) 。

 function validate () { if( $("#full_name").val() == "" ) { alert( "Please provide your name!" ); $("#full_name").focus() ; return false; } if( $("#email").val() == "") { alert( "Please provide your Email!" ); $("#email").focus() ; return false; } if( $("#message").val() == "" ) { alert( "Please Enter Message" ); return false; } return( true ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="form"> <h2> Contact Us </h2> <form name="c_form" action="#" method="post" onsubmit="return(validate());"> <div class="input"> <input type="text" name="full_name" id="full_name" placeholder="Full Name"> </div> <div class="input"> <input type="text" name="email" id="email" placeholder="Email Address"> </div> <div class="input textarea"> <textarea id="message" name="message" placeholder="Enter Message Here"></textarea> </div> <div class="input button"> <button id="button"> Send </button> </div> </form> </div> 

Answer 3

我在您的html中添加了一個ID“ c_form”，並刪除了onsubmit屬性，並使用了以下javascript代碼，該代碼似乎有效。 關鍵是調用ev.preventDefault（）;。

$(document).ready(function () {
$("#c_form").submit(validate);
});

function validate(ev)
{
  if( $("#full_name").val() == "" )
  {
    alert( "Please provide your name!" );
    $("#full_name").focus() ;
    ev.preventDefault();
    return false;
  }

  if( $("#email").val() == "")
  {
    alert( "Please provide your Email!" );
    $("#email").focus() ;
    ev.preventDefault();
    return false;
  }

  if( $("#message").val() == "" )
  {
    alert( "Please Enter Message" );
    ev.preventDefault();
    return false;
  }

  return true;
}