Question

我在使用jquery验证的表单时遇到了一些问题。

问题是当必填字段为空并且使用了发送（提交）按钮时，会出现一些错误消息，但不是全部，并且出现错误消息的地方输入字段消失。然后单击那些未收到错误消息的所需输入字段（*）下面的某些输入字段时，错误消息仍会显示在输入字段的末尾，然后消失。

当然，应显示所有错误消息，并且所有输入字段应保持可见。请问有什么帮助吗？

＆＃13;

<script>
          autosize(document.querySelectorAll('#message_content'));
        </script>


   <script>


var validator = $("#comment_form").validate({
     ignore: [],
        rules: {
            gender: {
                required: true,
            },
            first_name: {
                required: true,
                minlength: 2
            },
            last_name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
             email_again: {
                required: true,
                email: true
            },
            message_subject: {
                required: true,
                email: true
            },
            message: {
                required: true,
                email: true
            },
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
        }
    }
});

</script>

＆＃13;

html {
  text-align: center
}

body {
  display: inline-block;
  margin: 0px auto;
  text-align: left;
}

#comment_form {
  width: 302px;
}

.label-radio {
  font-size: 0.8em;
  color: #d8e3e6;
  margin-right: 10px;
  font-family: questrial;
}

.inputfield3 {
  height: 33px;
  max-height: 33px;
  width: 302px;
  border-radius: 16px;
  margin-top: 5px;
  margin-bottom: 7px;
  padding: 0px 10px 0px 10px;
  overflow: hidden;
  border: none;
  background-color: yellow;
  display: inline-block;
  font-family: questrial;
  font-size: 0.8em;
}

.textareafield {
  height: 66px max-height: 300px;
  width: 302px;
  max-width: 302px;
  border-radius: 16px;
  margin-top: 5px;
  margin-bottom: 7px;
  padding: 10px 10px 10px 10px;
  overflow: hidden;
  border: none;
  background-color: yellow;
  display: inline-block;
  font-family: questrial;
  font-size: 0.8em;
}

#g-recaptcha-outer {
  width: 302px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
  margin: -10px auto 0 auto;
}

#recaptcha-header {
  margin: 0px 0px 8px 0px;
  letter-spacing: -0.03em;
  color: #d8e3e6;
  font-size: 1.0em;
  margin-top: 0px;
  font-family: questrial;
  font-size: 0.8em;
}

#contact_submit_button {
  display: block;
  text-decoration: none;
  margin: 10px auto 80px auto;
  width: 230px;
  height: 33px;
  padding: 0px 15px 0px 15px;
  background-color: rgb(0, 157, 233);
  color: #ffffff;
  font-weight: 900;
  border-radius: 16px;
  border: none;
  outline: none;
  font-family: questrial;
}

.requiredmark {
  margin: 0px 0px 0px 295px;
  display: inline-block;
  color: #000000;
  padding: 20px 0px 0px 0px;
}

.requiredmark-radio {
  margin: 0px 0px 0px 0px;
  display: inline-block;
  color: #d8e3e6;
  font-family: questrial;
}

.error {
  display: none;
  margin-left: 10px;
}

.error_show {
  color: red;
  margin-left: 10px;
}

input.invalid,
textarea.invalid {
  border: 2px solid red;
}

input.valid,
textarea.valid {
  border: 2px solid green;
}

label.error {
  margin-top: 50px;
  float: none;
  color: red;
  padding-left: .5em;
  vertical-align: top;
  display: block;
  font-family: Questrail;
}

＆＃13;

<html>
  <head>
  <script src='https://www.google.com/recaptcha/api.js'></script>
    <script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
</head>

  <body>
  
  <form id="comment_form" action="form.php" method="post">

  <div class="compulsoryfield">
    <input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
    <input class="gender" type="radio" name="gender" value="Ms"><label class="label-radio">Ms.</label>
    <span class="requiredmark-radio">*</span>
  </div>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
    <input id="first_name" class="inputfield3" type="text" placeholder="first name" required>
  </div>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
    <input id="last_name" class="inputfield3" type="text" placeholder="last name" required>
  </div>

  <input class="inputfield3" type="text" placeholder="company name (if applicable)">
  <input class="inputfield3" type="text" placeholder="customer number (on invoice if available)">
  <br><br><br><br>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
    <input id="email" class="inputfield3" type="email" placeholder="email address" required>
  </div>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
    <input id="email-again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>


  <input class="inputfield3" type="text" placeholder="telephone number (country code included)">
  <br><br><br><br><br><br>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
    <input id="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
  </div>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
    <textarea id="message_content" class="textareafield" name="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>


  <p id="recaptcha-header">before sending, please show us you're real:</p>

  <div><span class="requiredmark">*</span>
    <div id="g-recaptcha-outer" class="compulsoryfield2">
      <div class="g-recaptcha" data-sitekey="6LdBLBUUAAAAAI6eMRYRaA5B-EN_UDKGzwHtNMU1"></div>
      <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
    </div>

    <br><br>
    <input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">

</form>
<br><br><br><br><br><br>
</body>
 </html>

＆＃13;

Answer 1

请检查此代码，您需要在名称中添加名称标签，例如名称=＆＃34;电子邮件＆＃34;等

 <html>
 <head>
 <script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
 </head>

 <body>

 <form id="comment_form" action="form.php" method="post">

 <div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required>          <label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms"><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>

 <div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>

<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>

<input class="inputfield3" type="text" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" placeholder="customer number (on invoice if available)">
 <br><br><br><br>

 <div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required>
 </div>

 <div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email-again" name="email-again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>


  <input class="inputfield3" type="text" placeholder="telephone number (country code included)">
  <br><br><br><br><br><br>

  <div class="compulsoryfield"><span class="requiredmark">*</span>
   <input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
   </div>

   <div class="compulsoryfield"><span class="requiredmark">*</span>
   <textarea id="message_content" name="message_content" class="textareafield" name="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>


   <p id="recaptcha-header">before sending, please show us you're real:</p>

   <div><span class="requiredmark">*</span>
   <div id="g-recaptcha-outer" class="compulsoryfield2">
  <div class="g-recaptcha" data-sitekey="6LdBLBUUAAAAAI6eMRYRaA5B-EN_UDKGzwHtNMU1"></div>
  <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
 </div>

 <br><br>
 <input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">

  </form>
  <br><br><br><br><br><br>
  </body>
  </html>

并更新此代码

.inputfield3 {
 height: 33px;
  max-height: 33px;
 width: 302px;
 border-radius: 16px;
 margin-top: 5px;
 margin-bottom: 7px;
 padding: 0px 10px 0px 10px;
  overflow: hidden;
 border: none;
 background-color: yellow;
 display: inline-block !important;
 font-family: questrial;
 font-size: 0.8em;
 }

.textareafield {
  height: 66px max-height: 300px;
  width: 302px;
  max-width: 302px;
  border-radius: 16px;
  margin-top: 5px;
  margin-bottom: 7px;
 padding: 10px 10px 10px 10px;
  overflow: hidden;
 border: none;
 background-color: yellow;
 display: inline-block !important;
 font-family: questrial;
font-size: 0.8em;
}

请同时添加此代码

 .gender {
    border-radius: 16px;
    margin-top: 5px;
    margin-bottom: 7px;
    padding: 0px 10px 0px 10px;
    overflow: hidden;
    border: none;
    background-color: yellow;
    display: inline-block !important;
    font-family: questrial;
    font-size: 0.8em;
}

#gender-error {
    float: right;
}

css并不完美，但它会满足您的要求

更新此代码

  <script>


 var validator = $("#comment_form").validate({
 ignore: [],
    rules: {
        gender: {
            required: true,
        },
        first_name: {
            required: true,
            minlength: 2
        },
        last_name: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true
        },
         email_again: {
            required: true,
            email: true
        },
        message_subject: {
            required: true
        },
        message: {
            required: true
        },
        hiddenRecaptcha: {
            required: function () {
                if (grecaptcha.getResponse() == '') {
                    return true;
                } else {
                    return false;
                }
            }
    }
  }
 });

</script>

Answer 2

您的一些输入会收到课程＆＃34;错误＆＃34;，这会将它们置于＆＃34; display：none＆＃34;，这就是它们消失的原因。＆＃34;错误＆＃34; class在JQuery错误标签上设置，它使它们成为＆＃34; display：none＆＃34;当错误消失。

使用jQuery验证并不会显示所有错误消息，输入字段也会消失

2 个答案: