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