Question

这种简单的表格验证不起作用，这让我感到恼火。请告诉我这是什么问题。我一直试图找到一个差不多两个小时的错误，但无法找到它。请帮帮我。

看看代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

我做了一些改动，但它确实有效。以下代码段：

包含jQuery。
添加$(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

我添加了＆＃34; c_form＆＃34;到你的HTML并删除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;
}

基本表单验证无效

3 个答案: