Форма не отправляется после проверки

Question

Добрый вечер,

В настоящее время у меня есть HTML-форма со сценарием для проверки поля, в которое вводятся данные, однако после проверки все поля заполнены не отправляется, кто-нибудь может посоветовать, что не так?Новичок в этом изучении, и я очень признателен за любую возможную помощь.

Я приложил код, который я использую ниже.

        <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

Это один из способов, как вы могли бы сделать это:

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>

Для правильной работы убедитесь, что определено grecaptcha.

Answer 2

Замените побитовое И (&) на логическое И (&&) в вашем onsubmit, и оно будет работать, как ожидалось.
См. этот вопрос ответ для деталей.

Вам также необходимо return true в каждой из ваших функций, если проверка прошла успешно.В противном случае вы возвращаете undefined (по умолчанию), то есть значение false:

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>