Using jQuery validate not all error messages appear and input fields disappear

Question

I am having some trouble with a form that is using jquery validate.

The problem is that when required fields are left empty and the send (submit) button is used, some error messages appear, but not all, and where the error messages do appear the input fields disappear. When then clicking some of the input fields below those required input fields (*), that did not receive error messages, the error message still appears end the input field then disappears.

Of course all error messages should appear and all input fields should remain visible. Can any help please?

Please see the form here!

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

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

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

here some error in this code

Shafiqul Islam
– Shafiqul Islam

2017-02-16 13:43:40 +00:00
Commented Feb 16, 2017 at 13:43 — Shafiqul Islam
– Shafiqul Islam, Commented Feb 16, 2017 at 13:43

Shafiqul Islam · Accepted Answer · 2017-02-16 16:12:01Z

please check this code, you need to add name tag in form like name = "email" etc

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

and also update this code

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

please add this code also

 .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 is not perfect but it will fill your requirement

update this code

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

Sorry. The error message for the radio buttons does move, but the radio buttons do still disappear. Another strange things is, when adding text in the message-subject input field, it says that the email address is invalid. But this input field is set to text?? Got to go out for an hour..
.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; } code need to add your style
Thanks again!!. The problem with the message-subject input field you have solved. Only the disappearing radio buttons still remains, even after copying your new .gender and #gender.error styles into the document.
I know I am asking a bit, but your help would be much appreciated!

Тодор Иванов · Accepted Answer · 2017-02-16 13:49:28Z

0

Some of your inputs receive the class "error", which places them in "display:none", this is why they are disappearing. The "error" class is set on JQuery error labels and it makes them "display:none" when the error is gone.

answered Feb 16, 2017 at 13:49

Тодор Иванов

3674 silver badges19 bronze badges

Collectives™ on Stack Overflow

Using jQuery validate not all error messages appear and input fields disappear

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related