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