验证后表格未提交

Question

Good evening,

I currently have a HTML Form with a script to validate the field have data entry into them however after it validating all fields are filled it doesnt submit, can anybody please advise what is wrong? New to this so learning and would really appreciate any help possible.

I have attached the code im using below.

  <div id="form"> <form name="contact" method="post" action="contact.php" onsubmit="return !!(validatename()&validateemail()&validatecomments()&validateRecaptcha());"> <table width="450px"> <tr> <td valign="top"><label for="name">Name</label></td> <td valign="top"><input type="text" name="name" maxlength="50" size="30"></td> </tr> <tr> <td valign="top"><label for="email">Email Address</label></td> <td valign="top"><input type="text" name="email" maxlength="80" size="30"></td> </tr> <tr> <td valign="top"><label for="comments">Comments</label></td> <td valign="top"><textarea name="comments" maxlength="1000" cols="32" rows="8"></textarea></td> </tr> <tr> <td colspan="2" style="text-align:center"> <div id="form" class="g-recaptcha" data-sitekey="6LdcZFkUAAAAAFoHAYtupqKzCgd2T9XzHZFj8XNw"></div> <input type="image" src="images/submit.png" alt="Submit"> </td> </tr> </table> </form> <script> function validatename() { if( document.contact.name.value == "" ) { alert( "Please provide your name!" ); document.contact.name.focus() ; return false ; } } function validateemail() { if( document.contact.email.value == "" ) { alert( "Please provide your email address!" ); document.contact.email.focus() ; return false ; } } function validatecomments() { if( document.contact.comments.value == "" ) { alert( "Please provide your comments!" ); document.contact.comments.focus() ; return false ; } } function validateRecaptcha() { var response = grecaptcha.getResponse(); if (response.length === 0) { alert("You need to fill the captcha"); return false ; } } </script> 

Answer 1

Replace bitwise AND ( & ) with logical AND ( && ) in your onsubmit and it will work as expected.
See this question 's answer for details.

You also need to return true in each of your functions if the validation is succesful. Otherwise, you return undefined (default), which is falsey:

 function validateName() { if( document.contact.name.value == "" ) { alert( "Please provide your name!" ); document.contact.name.focus() ; return false ; } return true } function validateEmail() { if( document.contact.email.value == "" ) { alert( "Please provide your email address!" ); document.contact.email.focus() ; return false ; } return true } function validateComments() { if( document.contact.comments.value == "" ) { alert( "Please provide your comments!" ); document.contact.comments.focus() ; return false ; } return true } function validateRecaptcha() { //overriding this one, we don't have recaptcha on SO return true; var response = grecaptcha.getResponse(); if (response.length === 0) { alert("You need to fill the captcha"); return false ; } return true; } 

 <div id="form"> <form name="contact" method="post" action="contact.php" onsubmit="return !!(validateName()&&validateEmail()&&validateComments()&&validateRecaptcha());"> <table width="450px"> <tr> <td valign="top"><label for="name">Name</label></td> <td valign="top"><input type="text" name="name" maxlength="50" size="30"></td> </tr> <tr> <td valign="top"><label for="email">Email Address</label></td> <td valign="top"><input type="text" name="email" maxlength="80" size="30"></td> </tr> <tr> <td valign="top"><label for="comments">Comments</label></td> <td valign="top"><textarea name="comments" maxlength="1000" cols="32" rows="8"></textarea></td> </tr> <tr> <td colspan="2" style="text-align:center"> <div id="form" class="g-recaptcha" data-sitekey="6LdcZFkUAAAAAFoHAYtupqKzCgd2T9XzHZFj8XNw"></div> <input type="image" src="images/submit.png" alt="Submit"> </td> </tr> </table> </form> 

Answer 2

This is one way how you could do it:

 function validatename() { if (document.contact.name.value == "") { alert("Please provide your name!"); document.contact.name.focus(); return false; } else { return true; } } function validateemail() { if (document.contact.email.value == "") { alert("Please provide your email address!"); document.contact.email.focus(); return false; } else { return true; } } function validatecomments() { if (document.contact.comments.value == "") { alert("Please provide your comments!"); document.contact.comments.focus(); return false; } else { return true; } } function validateRecaptcha() { var response = grecaptcha.getResponse(); if (response.length === 0) { alert("You need to fill the captcha"); return false ; } else { return true; } } document.getElementById('my-form').addEventListener('submit', function(e) { e.preventDefault(); if (validatename() && validateemail() && validatecomments() && validateRecaptcha()) { var formValidation = true; } else { var formValidation = false; } if (formValidation) { this.submit(); } }); 

 <div id="form"> <form id="my-form" name="contact" method="post" action="contact.php"> <table width="450px"> <tr> <td valign="top"><label for="name">Name</label></td> <td valign="top"><input type="text" name="name" maxlength="50" size="30"></td> </tr> <tr> <td valign="top"><label for="email">Email Address</label></td> <td valign="top"><input type="text" name="email" maxlength="80" size="30"></td> </tr> <tr> <td valign="top"><label for="comments">Comments</label></td> <td valign="top"><textarea name="comments" maxlength="1000" cols="32" rows="8"></textarea></td> </tr> <tr> <td colspan="2" style="text-align:center"> <div id="form" class="g-recaptcha" data-sitekey="6LdcZFkUAAAAAFoHAYtupqKzCgd2T9XzHZFj8XNw"></div> <input type="image" src="images/submit.png" alt="Submit"> </td> </tr> </table> </form> </div> 

To make it work correctly, make sure that grecaptcha is defined.