基本表单验证不起作用

Question

This simple form validation is not working and it's irritating me. Please let me know what is the problem. I have been trying to find a bug for almost two hours but can't find it. Please help me.

Take a look at code:

 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

Why not using HTML5's native "required" attribute? Nowadays, most browsers will happily interpret it without problems. If you want to support older browsers, just use a library like h5validate , but (please) keep your html clean.

Take a look on the same form using those attributes. No JS, no DIV containers, just plain native 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

I made a few changes and it works. The following snippet:

1. Include jQuery.
2. Add all the contents inside $(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

I added an id of "c_form" to your html and removed the onsubmit property and used the following javascript code, which seemed to work. The key is calling 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;
}