Eddy Eddy -4 years ago 202
CSS Question

Why are radio buttons disappearing with JQuery validate?

In advance, apologies for the amount of code. I wanted to present a complete picture.

MY PROBLEM: When the form is validated (using Jquery Validate), the radio buttons disappear if the user did not select a radio button before sending. How can I fix this?

UUUHMM: When I remove the "required" from the radio buttons, the radio buttons do NOT disappear. You'd think "problem solved", but I do need that an message is shown when the radio buttons aren't used, and this does not happen then.

After checking on a windows computer I see that none of the messages are shown on a windows computer. What??? What am I doing wrong!? On a mac the messages are shown.



autosize(document.querySelectorAll('#message_content'));


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


jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please use identical email addresses.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});

@font-face {
font-family: Questrial;
src: url(Questrial-Regular.otf);
}

body {
background-color: blue;
}

div {
font-family: Questrial;
}

input {
font-family: Questrial;
}

text-area {
font-family: Questrial;
}

span {
font-family: Questrial;
}

p {
font-family: Questrial;
}

form {
font-family: Questrial;
}

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: -10px;
margin-bottom: 17px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}

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

.textareafield {
max-height: 350px;
width: 302px;
max-width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 10px 10px 10px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
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 20 auto;
}

#recaptcha-header {
margin: 30px 0px -15px 0px;
color: #d8e3e6;
font-size: 1.0em;
font-family: questrial;
font-size: 0.8em;
letter-spacing: -0.03em;
}

#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;
border-radius: 16px;
border: none;
outline: none;
font-family: questrial;
font-size: 1em;
}

.requiredmark {
margin: 0px 0px 0px 295px;
display: inline-block;
color: #d8e3e6;
padding: 20px 0px 0px 0px;
}

.requiredmark2 {
margin: -39px 0px 0px 295px;
display: inline-block;
color: #d8e3e6;
padding: 20px 0px 0px 0px;
}

.requiredmark-radio {
margin: 20px 0px 0px 0px;
display: inline-block;
color: #d8e3e6;
font-family: questrial;
}

.error {
display: none;
}

.error_show {
color: red;
}

input.invalid,
textarea.invalid {
border: 1px solid red;
}

input.valid,
textarea.valid {}

label.error {
margin-top: -10px;
margin-bottom: 30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}

​ #hiddenRecaptcha-error {
margin-top: 65px!important;
margin-bottom: 30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}

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

#gender-error {
float: right;
margin-bottom: 0px!important;
margin-top: 20px!important
}

.errMsg {
color: #ffffff;
}

<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="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{ 'iframeresizer-min.js' | url_asset }}" type="text/javascript"></script>
<script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></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" required><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="requiredmark2">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>

<input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)">
<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="requiredmark2">*</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" name="telephone_number" placeholder="telephone number (country code included)">
<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="requiredmark2">*</span>
<textarea id="message_content" name="message_content" class="textareafield" type="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="mySiteKey" required></div>

</div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<br><br>

<input id="contact_submit_button" type="submit" name="submit" value="SEND">

</form>




</body>

</html>




Answer Source

The reason why you don't see your radio button is because when the radio input's have an error you give them the class "error". Which in the css you tell to display: none;. If you remove the class the element will be shown as you expected

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download