Hej,
mam problem z formularzem na stronie. Nie wiedzieć czemu, checkbox jest niewidoczny w przeglądarce Google Chrome - na MF działa. W konsoli nie widziałam żadnych błędów.
http://www.screencast.com/t/FOT34rbeKkm
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formularz</title>
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="libs/animate/animate.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="header">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="tb_form">
<form class="form" id="gForm" method="get" action="" novalidate="novalidate">
<h2 class="hidden-sm hidden-xs">Formularz</h2>
<p>
<input id="firstname" for="firstname" name="firstname" aria-required="true" placeholder="Imię i nazwisko" aria-invalid="true" type="text">
</p>
<p>
<input id="email" for="email" name="email" aria-required="true" placeholder="E-mail" type="email">
</p>
<p>
<input for="field" placeholder="Numer telefonu" id="field" name="field" maxlength="9">
</p>
<p>
<div class="checkbox_tb">
<span><input for="agree" class="checkbox checkbox-button" id="agree" name="agree" aria-required="true" type="checkbox"><label id="agree-error" class="error" for="agree"></label></span></div>
<div class="checkbox_tb">
<span>Zgadzam się na przetwarzanie moich danych osobowych w celach marketingowych</span>
</div>
</p>
<p>
<input class="submit" value="Wyślij" type="submit" data-popup-open="popup-1">
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<!--[if lt IE 9]>
<script src="libs/html5shiv/es5-shim.min.js"></script>
<script src="libs/html5shiv/html5shiv.min.js"></script>
<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
<script src="libs/respond/respond.min.js"></script>
<![endif]-->
<script src="libs/jquery/jquery-2.1.1.min.js"></script>
<script src="libs/jquery/jquery.validate.js"></script>
<script src="libs/animate/wow.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>
CSS:
.error{display: block;color: red;}
#gForm {background-image: linear-gradient(#FF6699, #FFCCCC);transition:background 0.4s ease;
-webkit-transition:background 0.4s ease;-o-transition:background 0.4s ease;-moz-transition:background 0.4s ease;
-ms-transition:background 0.4s ease;height: auto;background-size: cover;box-shadow:1px 1px 7px 0px black;
padding: 15px;}
.tb_form{display: table-cell;vertical-align: middle;height: 762px;}
#gForm h2{color: #ffffff;}
#gForm input{padding: 12px;width: 100%;font-size: 20px;font-weight: bold;border-style: none;}
#gForm .checkbox {width: 0%;cursor: pointer;}
.checkbox_tb{display: table-cell;vertical-align: middle;height: 40px;padding-left: 15px;}
.submit{color: #ffffff;background-color: #f94500;border-color: #f94500;border-style: none;
padding: 20px 0px!important;font-size: 30px;font-weight: bold;border-radius: 5px;}
.submit:hover{background-color: #e24103;}
#gForm p:last-child{padding-top: 10px;}
@media(min-width:992px) and (max-width: 1199px){
#gForm input {padding: 10px;width: 100%;font-size: 15px;font-weight: bold;border-style: none;}
.checkbox_tb{font-size: 11px;}}
@media(min-width:768px) and (max-width: 991px){
#gForm input {padding: 25px;font-size: 30px;}
.checkbox_tb {font-size: 23px;}
.tb_form {height: 621px;}}
@media (min-width: 430px) and (max-width:767px){
.tb_form {height: 0px;}
#gForm {background-image: linear-gradient(#FF6699, #FFCCCC);box-shadow: none;padding: 15px;}
@media (max-width:429px){
#gForm h2{font-size: 28px;padding-bottom: 5px;}
.tb_form {height: 0px;}
#gForm {background-image: linear-gradient(#FF6699, #FFCCCC);box-shadow: none;padding: 15px;}
.checkbox_tb {font-size: 11px;}}
JS:
$().ready(function() {
$("#gForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
field: {
required: true,
number: true,
minlength: 9
},
agree: "required"
},
messages: {
firstname: "Proszę podać imię i nazwisko",
email: "Proszę podać poprawny email",
field: {
required: "Proszę podać poprawny numer telefonu",
minlength: "Proszę podać poprawny numer telefonu"
},
agree: "To pole jest wymagane"
}
});
});
Bardzo proszę o pomoc!!
