Button "Versturen" al zichtbaar na invullen 1 veld ipv hele form

Door Obelix Idefix op 22-04-2018 19:35

2.793 views

Ik heb op internet gevonden de volgende code:


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

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:


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

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.