form field rode border geven na error
Ik heb een formulier met foutvalidatie.
Ik kan bij een fout bijvoorbeeld naast een veld dat niet is ingevuld (en wel ingevuld moet worden) een tekst of rood asteriskje laten plaatsen.
Nu wil ik graag dat de form field highlight als het niet door de validatie heenkomt.
Enigszins op de volgende manier:
http://static.afbeeldinguploaden.nl/1511/127967/fxGF71C4.png
Ik zoeken en zoeken via Google, kom vooral op codes uit die aangeven wat er moet gebeuren als de focus op een form field ligt, zoals bijvoorbeeld bij de volgende site
https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
Zoiets wil ik dus ook graag, maar dan voor als een veld, of velden, de validatie niet goed doorkomen.
Via Google gezocht op dingen als 'form field highlight on error' en op youtube ook gezocht. Ik kom tot nu toe niet tegen wat ik nodig heb.
Iemand die me kan aangeven waar ik op moet zoeken, waar een handleiding staat, hoe ik het in het algemeen aan kan pakken, stuk CSS of php code wat nog nodig is?
Alvast bedankt :)
Code (php)
1
2
3
4
5
2
3
4
5
var input = document.getElementById('jouwInput');
if(input.value == '') {
input.style.borderColor = 'red';
}
if(input.value == '') {
input.style.borderColor = 'red';
}
Zo maak je de borders red.
Je kan het inpakken in een mooie functie, en dan via het formulier onsubmit="validate()" o.i.d
Code (php)
1
.frmred input {border-color: red;}
En in het formulier gebruik ik dit zo (voorbeeld voor 1 veld, ik gebruik table om formulier op te maken):
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<tr>
<?php echo isset($aErrors['Achternaam']) ? '<td class="frmred">' : '<td>' ?>
<label for="Achternaam">Achternaam: *</label>
<input id="Achternaam" name="Achternaam" type="text" maxlength="60" size="65" value="<?php echo isset($_POST['Achternaam']) ? htmlspecialchars($_POST['Achternaam']) : '' ?>" />
</td>
</tr>
<?php echo isset($aErrors['Achternaam']) ? '<td class="frmred">' : '<td>' ?>
<label for="Achternaam">Achternaam: *</label>
<input id="Achternaam" name="Achternaam" type="text" maxlength="60" size="65" value="<?php echo isset($_POST['Achternaam']) ? htmlspecialchars($_POST['Achternaam']) : '' ?>" />
</td>
</tr>
$aErrors['Achternaam'] heb ik gevuld als er een fout was in Achternaam tijdens de controle van het formulier.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$aErrors = array();
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Er zijn gegevens verstuurd naar deze pagina!
// Een Achternaam bevat letters en spaties (minimaal 1)
$veld = 'Achternaam';
$input = $_POST[$veld];
if ( empty($input) ) {
$aErrors[$veld] = $veld . ' is verplicht';
}
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Er zijn gegevens verstuurd naar deze pagina!
// Een Achternaam bevat letters en spaties (minimaal 1)
$veld = 'Achternaam';
$input = $_POST[$veld];
if ( empty($input) ) {
$aErrors[$veld] = $veld . ' is verplicht';
}
}