Button "Versturen" al zichtbaar na invullen 1 veld ipv hele form
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 4
},
email: {
required: true,
email: true
}
}
});
});
</script>
<body>
<form id="myform">
<input type="text" id="name" name="name" /><br/>
<input type="email" id="email" name="email" /><br/>
<input type="submit" id="submit" disabled="disabled" />
</form>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 4
},
email: {
required: true,
email: true
}
}
});
});
</script>
<body>
<form id="myform">
<input type="text" id="name" name="name" /><br/>
<input type="email" id="email" name="email" /><br/>
<input type="submit" id="submit" disabled="disabled" />
</form>
</body>
</html>
Dit doet precies wat ik zou willen: de button om te versturen wordt pas klikbaar als aan de voorwaarden wordt voldaan.
Het idee was om daar wat meer een persoonlijke vormgeving op los te laten en dat werd onderstaande code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<link rel="stylesheet" href="pure-release-1.0.0/pure-min.css" >
<link rel="stylesheet" href="pure-release-1.0.0/grids-responsive-min.css">
<style type="text/css">
body {
}
input:required:invalid, input:focus:invalid {
background-image: url(afbeeldingen/cancel_48.png);
background-position: right center;
background-repeat: no-repeat;
}
input:required:valid {
background-image: url(afbeeldingen/accepted_48.png);
background-position: right center;
background-repeat: no-repeat;
}
textarea:required:invalid, textarea:focus:invalid {
background-image: url(afbeeldingen/cancel_48.png);
background-position: right center;
background-repeat: no-repeat;
}
textarea:required:valid, textarea:focus:valid {
background-image: url(afbeeldingen/accepted_48.png);
background-position: right center;
background-repeat: no-repeat;
}
.help {
display:none;
font-size:90%;
}
input:focus + .help {
display:inline-block;
}
input:required {
background:hsl(180, 50%, 90%);
border:1px solid #999;
}
.button-success,
.button-error{
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
</style>
<script>
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message:{
required: true,
minlength: 2
}
}
});
});
</script>
</head>
<body>
<form id="myform" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Uw naam a.u.b." required>
<span id="name-format" class="help">Vul hier de naam in, waarmee ik u mag aanspreken.</span>
</div>
<div class="pure-control-group">
<label for="email">E-mailadres</label>
<input id="email" type="email" placeholder="Uw e-mailadres a.u.b." required>
<span id="name-format" class="help">Vul hier uw e-mailadres in, waarnaar ik een reactie mag sturen. </span>
</div>
<div class="pure-control-group">
<label for="foo">Uw vraag / opmerking</label>
<textarea id="message" class="pure-input-1-2" placeholder="Wat wilt u met me delen?" required></textarea>
</div>
<div class="pure-controls">
<button type="submit" id="submit" class="pure-button button-success" disabled="disabled">Versturen</button>
</div>
</fieldset>
</form>
</body>
</html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<link rel="stylesheet" href="pure-release-1.0.0/pure-min.css" >
<link rel="stylesheet" href="pure-release-1.0.0/grids-responsive-min.css">
<style type="text/css">
body {
}
input:required:invalid, input:focus:invalid {
background-image: url(afbeeldingen/cancel_48.png);
background-position: right center;
background-repeat: no-repeat;
}
input:required:valid {
background-image: url(afbeeldingen/accepted_48.png);
background-position: right center;
background-repeat: no-repeat;
}
textarea:required:invalid, textarea:focus:invalid {
background-image: url(afbeeldingen/cancel_48.png);
background-position: right center;
background-repeat: no-repeat;
}
textarea:required:valid, textarea:focus:valid {
background-image: url(afbeeldingen/accepted_48.png);
background-position: right center;
background-repeat: no-repeat;
}
.help {
display:none;
font-size:90%;
}
input:focus + .help {
display:inline-block;
}
input:required {
background:hsl(180, 50%, 90%);
border:1px solid #999;
}
.button-success,
.button-error{
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
</style>
<script>
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message:{
required: true,
minlength: 2
}
}
});
});
</script>
</head>
<body>
<form id="myform" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Uw naam a.u.b." required>
<span id="name-format" class="help">Vul hier de naam in, waarmee ik u mag aanspreken.</span>
</div>
<div class="pure-control-group">
<label for="email">E-mailadres</label>
<input id="email" type="email" placeholder="Uw e-mailadres a.u.b." required>
<span id="name-format" class="help">Vul hier uw e-mailadres in, waarnaar ik een reactie mag sturen. </span>
</div>
<div class="pure-control-group">
<label for="foo">Uw vraag / opmerking</label>
<textarea id="message" class="pure-input-1-2" placeholder="Wat wilt u met me delen?" required></textarea>
</div>
<div class="pure-controls">
<button type="submit" id="submit" class="pure-button button-success" disabled="disabled">Versturen</button>
</div>
</fieldset>
</form>
</body>
</html>
Wat er nu gebeurt is dat al na het invullen van het 1e veld, de knop klikbaar is.
Alleen het tweede of derde veld vullen, maakt de knop (nog) niet klikbaar; dat (b)lijkt alleen gekoppeld aan het 1e invoerveld.
Omdat het 3e veld een textarea is, heb ik het ook geprobeerd zonder, zodat alleen de input heb staan in mijn formulier.
Maar ook dan werkt het niet; het invullen van alleen het 1e veld is voldoende om de knop klikbaar te maken.
Ik ben er nog niet achter waardoor dit wordt veroorzaakt.
Is er iemand die mij dat kan/wil uitleggen?
Het idee is dus dat pas na het invullen van alle drie de velden, je op "Versturen" kunt drukken.
Heb daar elke keer over heen gekeken. :(
Als ik nu alleen werk met de 2 inputvelden (naam / email) gaat het goed.
Met de textarea werkte het nog niet, maar dat heb ik alsvolgt opgelost:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$('textarea').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message:{
required: true,
minlength: 2
}
}
});
});
</script>
$(document).ready(function() {
$('input').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$('textarea').on('blur', function() {
if ($("#myform").valid()) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', 'disabled');
}
});
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message:{
required: true,
minlength: 2
}
}
});
});
</script>
Gewijzigd op 22/04/2018 21:01:02 door Obelix Idefix
