表格未经验证后提交

Question

晚上好，

我目前有一个带有脚本的HTML表单，用于验证字段是否有数据输入但是在验证完所有字段后它都没有提交，有人可以告诉我有什么问题吗？这是学习的新手，并且非常感谢任何可能的帮助。

我已经使用下面附加了代码。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

用&中的逻辑AND（&&）按位AND（onsubmit）替换，它将按预期工作。
有关详细信息，请参阅this question的答案。

如果验证成功，您还需要在每个功能中return true。否则，您返回undefined（默认值），这是假的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你如何做到的一种方式：

＆＃13;

＆＃13;

if ( $rating_count >= 0 ) : ?>
    <?php echo wc_get_rating_html($average, $rating_count); ?>
    <?php if ( comments_open() ): ?>
    <a href="<?php echo get_permalink() ?>#reviews" class="woocommerce-review-link" rel="nofollow">(<?php printf( _n( '%s',$review_count,'woocommerce' ), '<span class="count">' . esc_html( $review_count ) . '</span>' ); ?>)Reviews</a>
    <?php endif ?>
<?php endif; ?>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要使其正常工作，请确保已定义<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>。