Quantcast
Channel: Forum Pasja Informatyki - Najnowsze pytania bez odpowiedzi
Viewing all articles
Browse latest Browse all 21942

Formularz - niewidoczny checkbox na stronie.

$
0
0

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


Viewing all articles
Browse latest Browse all 21942

Trending Articles


Sprawdź z którą postacią z anime dzielisz urodziny


MDM - Muzyka Dla Miasta (2009)


Częstotliwość 3.722MHz


POSZUKIWANY TOMASZ SKOWRON-ANGLIA


Ciasto 3 Bit


Kasowanie inspekcji Hyundai ix35


Steel Division 2 SPOLSZCZENIE


SZCZOTKOWANIE TWARZY NA SUCHO


Potrzebuje schemat budowy silnika YX140


Musierowicz Małgorzata - Kwiat kalafiora [audiobook PL]