Tijden veranderen
required fields en Return werkt als submit knop
Ik heb nu het volgende staan in de <head>
<script type="text/JavaScript">
$(document).ready(function() {
$("#form1").validate({
rules: {
email: {
required: true,
email: true },
controleEmail: {
required: false,
equalTo: "#email"}
},
messages: {
email: "Vul een geldig emailadres in"
},
showErrors: function(errorMap, errorList) {
this.defaultShowErrors();
$("#summary").html("U heeft niet alle velden (juist) ingevuld. Controleer de velden met een <img src=\"required.gif\"/>.");
}
});
});
</script>
En in ieder verplicht veld in de <body>
(in de input tag)"class="required" of class="required textfield
En dan een label
<label for="naam" class="error" style="display:none;"><img src="required.gif" /> Geb. datum verplicht/required </label>
Voor het return probleem heb ik dit geprobeerd (werkt dus niet)
In de <head>
required"onkeypress="return handleEnter(this,event)"
En in ieder inputveld tussen de <> onkeypress="return handleEnter(this,event)"
Als verzendknop heb ik deze aangemaakt.
<input type="submit" value=" Verzenden/Send ">
Ik maak een formulier (privé) voor de vereniging en dit is op dit moment het grootste probleem, want we ontvangen lege en/of onvolledig ingevulde formulieren.
In een later stadium wil ik ook nog een Captcha inbouwen omdat die robots best we vervelend zijn.
Vast bedankt voor antwoorden. Groet Mieke
Dit verwerkscript zou ook rechtstreeks aangeroepen kunnen worden vanaf een andere site als je hier geen voorziening inbouwt die CSRF tegengaat (dit kan een CAPTCHA ook/mede helpen tegengaan denk ik).
Voor het niet-submitten-via-enter, je zou hiervoor een CSS-klasse kunnen introduceren die je aan alle velden hangt waar je dit niet wilt laten doen, en vervolgens voeg je wat jQuery toe zodat deze keypress wordt afgevangen:
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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<form action="woops.htm" method="post">
<input type="text" class="nsoe" name="text" />
<button type="submit">verzend</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// No Submit On Enter
$('.nsoe').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
alert('noes!');
}
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<form action="woops.htm" method="post">
<input type="text" class="nsoe" name="text" />
<button type="submit">verzend</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// No Submit On Enter
$('.nsoe').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
alert('noes!');
}
});
});
//]]>
</script>
</body>
</html>
Dit helpt natuurlijk NIET als iemand bewust JavaScript-functionaliteit uitzet :). Controleer ALTIJD de data nogmaals aan de serverzijde.
Gewijzigd op 12/04/2015 16:25:25 door Thomas van den Heuvel
Dus ENTER verzend dan niet, maar gaat naar het volgende forumveld. Dat is gebruikersvriendelijker.
Daarnaast zou ik je 'controles' allemaal in HTML5 doen: dat is werkt altijd beter.
Eddy E op 12/04/2015 18:15:29:
In plaats van de ENTER-knop volledig uit te schakelen, wat echt onvriendelijk is, geef het de functionaliteit van een TAB.
Dat doe ik ook niet, ik geef aan hoe je deze uit kunt zetten in specifieke velden waar dat voor ongewenst gedrag zorgt. Het klinkt wel aardig, van een enter een tab maken, maar daarmee verander je echt de betekenis van wat een toets doet. Ik weet niet, misschien is het dan beter dat een toets niets doet, in plaats van wat anders. Maar misschien ook niet... Plus je blijft dan hangen op textareas denk ik. Ik zou iig mensen niet aansturen om toetsen op een niet (of minder) natuurlijke manier te gebruiken eigenlijk.
Je zou het ook zo kunnen zien: in een inputveld horen geen regelovergangen te zitten (anders had je maar een textarea moeten gebruiken). Het is dan ook niet vreemd dat je Enter-toets dan niets doet.
EDIT: daarnaast: als iemand per ongeluk op een enter ramt, dan zou de formulier-validatie toch getriggerd moeten worden (de js-validatie en/of de controle aan de serverkant)? Als je formulier onvolledig was ingevuld zou deze dan sowieso niet gesubmit (en zeker niet opgeslagen) moeten worden...
Gewijzigd op 12/04/2015 20:09:49 door Thomas van den Heuvel