Realtime input validatie tijdens invullen

[mmevanwitsen]

Wie kan mij helpen aan een manier om velden te controleren op een minimale en maximale waarde tijdens het invullen van het formulier. Ik ben al dagen opzoek via google en kom er niet uit.

Ik heb een formulier waarbij je in een inputfield een waarde tussen bijvoorbeeld 10 en 50 kunt invullen, maar wanneer je buiten deze getallen iets invult dan zou het veld óf rood moeten kleuren óf er moet een meldig verschijnen. Het mooiste zou zijn als het veld rood opkleurd.

Wie zou mij hiermee kunnen helpen. Alvast erg bedankt! :thumb:

 

[Tha Devil]

Welkom op Helpmij "mmevanwitsen" :thumb:

Deze vraag heeft meer met Javascript te maken dan met PHP.
Om die reden heb ik je vraag verplaatst naar de sectie "Javascript".

Volgens mij is dit wat je zoekt

Met vriendelijke groet,

Stefan (Tha Devil)
Moderator Helpmij.nl

 

[CaptainBri]

Je zou het met een library kunnen doen zoals LiveValidation welke Tha Devil al aangeeft, maar wellicht vind je het een beetje 'overkill'. Dan zou je een oplossing als deze kunnen gebruiken:

[js]<script type="text/javascript">
function kp(e){
var validInput = true;

var val = document.getElementById("invoer").value;
if(val !== 'null' && val !== ""){
if(isNumber(val)){
var nr = parseInt(val);
validInput = (nr >= 10 && nr <= 50);
}
else{
validInput = false;
}
}

document.getElementById("invoer").style.border = (validInput ? "1px solid black" : "2px solid red");
}

function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

<input id="invoer" onkeyup="kp()" />[/js]

 

[mmevanwitsen]

Captain Bri, heel erg bedankt voor je oplossing, ik heb deze geprobeerd in mijn formulier en het werkt super! Nu is mijn vraag hieropvolgend, ik heb een formulier met 78 invoervelden, moet ik nu voor elk veld een apart script schrijven of kan ik in het bestaande script alle invoervelden verwerken. Het is niet zo dat ze allemaal tussen de 10 en 50 moeten zijn, sommige invoervelden hebben ook een andere range in waarden. Alvast bedankt voor je antwoord.

 

[tiran818]

Ik neem de vrijheid om de oplossing uit te breiden naar de vraag. O
Voorzover ik weet moet je voor de verschillende waarden een appart scriptje maken.
Wel kan je het scriptje hergebruiken als je in plaats van kp() kp(this.id) mee geeft en "invoer" in deze functie vervangt voor e.
Als alle velden op nummers controleren zou je ook het minimum en maximum getal mee kunnen geven.
Dan wordt het als volgt:
[JS]
<script type="text/javascript">
function kp(id, minValue, maxValue){
var validInput = true;

var val = document.getElementById(id).value;
if(val !== 'null' && val !== ""){
if(isNumber(val)){
var nr = parseInt(val);
validInput = (nr >= minValue && nr <= maxValue);
}
else{
validInput = false;
}
}

document.getElementById(id).style.border = (validInput ? "1px solid black" : "2px solid red");
}

function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

<input id="invoer" onkeyup="kp(this.id, 10, 50)" />
[/JS]

Het is bij deze methode wel belangrijk om echt elke ID maar 1 keer voor te laten komen, anders gaan meerdere velden rood kleuren of zwart terwijl dit niet de bedoeling is.

 

[mmevanwitsen]

tiran818,

heel erg bedankt voor het oplossen van mijn vraag. Ik kan weer verder en mocht ik nog eens tegen een probleem aanlopen, dan weet ik zeker dat ik op helpmij snel en goed geholpen wordt! Top!! Bedankt!! :thumb: