Form not submitting after validation

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>

You never return `true` in any of your functions. Functions don't have a default return value so your tests always fail as they are always have a falsy value — Patrick Evans, May 28 '18 at 23:35
I have changed them to true and the form still isnt submitted — David Thompson, May 28 '18 at 23:37
Changed? you need to add a `return true;` statement at the end outside the if — Patrick Evans, May 28 '18 at 23:38
@DavidThompson - its not proper validation method. Please use proper form validation method. https://jqueryvalidation.org/ OR check javascript validation demo https://www.tutorialspoint.com/javascript/javascript_form_validations.htm — Jaydp, May 28 '18 at 23:39
@DavidThompson - convert all validation function to one, so, its easily manageable - https://www.geeksforgeeks.org/form-validation-using-html-javascript/ — Jaydp, May 28 '18 at 23:41

tao · Answer 1 · 2018-05-29T00:04:12.313

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>

score 0 · Answer 2 · answered May 29 '18 at 00:25

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.

Form not submitting after validation

2 Answers2