[JS] Formulier opmaken

Hallo,

Ik wil graag dat als mijn contactformulier een ontbrekende waarde heeft, bijvoorbeeld het veld naam, dat daar een rode border omheen komt en dat er een icoontje in de input verschijnt. Dit hoeft niet per se realtime te gebeuren, mag ook nadat er op Verzenden gedrukt is.

Voordat ik op JS kwam heb ik het met PHP geprobeerd maar dat lukte helaas niet helemaal zoals ik zou willen.

Zijn er hier leden die voorbeelden hebben of weten hoe je dit moet doen?

Alvast bedankt voor jullie hulp!

Met vriendelijke groet,

Jos

onkeydown/up?

Javascript is voor real-time dingen. PHP is server-side om dingen mee te berekenen en data te beheren. HTML is voor de opbouw van je site en CSS is om je site te stylen. Misschien btj fout uitgelegd maar je kan het dus niet met JS of PHP. Om inputs te stylen heb je CSS nodig.

Een rode border kan met dit:
border: 1px solid red;

en het icoontje kan met background-image.

Ik heb er geen verstand van maar miss dit:
If het vakje is niet ingevuld echo div1
Else echo div2
Héél simpel uitgelegd

Ogh zo, dat moet met PHP ja zoals Stefvdwel uitlegt.

Bedankt jongens, zover was ik ook al. Met php heb ik echter het probleem dat als ik de check inbouw of het formulier wordt verzonden, het formulier niet meer goed wordt weergeven.

Realtime is overigens ook toegestaan als jullie daar wel een oplossing mee weten, het was alleen geen eis van mijn kant.
Ik ben bekend met wat css, html, php en javascript doen hoor, dat hoeft niet uitgelegd te worden.
@Stefvdwel - Zo heb ik het nu dus, maar dat werkt niet vanwege bovenstaand probleem.

Antonn schreef:

Ogh zo, dat moet met PHP ja zoals Stefvdwel uitlegt.

Sarcastisch?

Google helpt veel : http://www.webmasterstart.nl/javascript/formuliergegevens-controleren-met-javascript.html

Hopelijk bedoel je dit.

Stefvdwel schreef:

Eerdere citaten tonen

Antonn schreef:

Ogh zo, dat moet met PHP ja zoals Stefvdwel uitlegt.

Sarcastisch?

No

Josnl schreef:

Bedankt jongens, zover was ik ook al. Met php heb ik echter het probleem dat als ik de check inbouw of het formulier wordt verzonden, het formulier niet meer goed wordt weergeven.

Realtime is overigens ook toegestaan als jullie daar wel een oplossing mee weten, het was alleen geen eis van mijn kant.
Ik ben bekend met wat css, html, php en javascript doen hoor, dat hoeft niet uitgelegd te worden.
@Stefvdwel - Zo heb ik het nu dus, maar dat werkt niet vanwege bovenstaand probleem.

Realtime kan met javascript. keyup

Stefvdwel schreef:

Ik heb er geen verstand van maar miss dit:
If het vakje is niet ingevuld echo div1
Else echo div2
Héél simpel uitgelegd

Zo is het totaal niet efficient...

Je kan het beter zoals in de link hierboven ergens wordt uitgelegd doen...

Realtime is beter, met PHP is het niet zo fijn werken, maar het kan natuurlijk wel, als jij het liever zo doet

Je moet nog steeds server-side controleren, dus dan doe je dubbel werk. Javascript is dus niet meteen beter.

Antonn schreef:

Je moet nog steeds server-side controleren, dus dan doe je dubbel werk. Javascript is dus niet meteen beter.

wel mooier

<script type="text/javascript">
function checkInput(input){
    if(input.value == ""){
        input.style.border = "1px solid red";
    }
    else{
        input.style.border = "";
    }
}
</script>

<input type="text" onchange="checkInput(this)" />

Iets in deze trend

Eleky schreef:

<script type="text/javascript">
function checkInput(input){
    if(input.value == ""){
        input.style.border = "1px solid red";
    }
    else{
        input.style.border = "";
    }
}
</script>

<input type="text" onchange="checkInput(this)" />

Iets in deze trend

Het is mooier om classes te adden en te removen.

Bedankt voor jullie hulp. Ondertussen ben ik al iets verder gekomen.

http://bit.ly/12qYg2l

Het enige probleem is nu dat ie de class niet terug veranderd als de input wel goed is, maar ik zie zo snel geen fout in de code. Jullie misschien wel?
// Edit; Probleem gevonden. Moet natuurlijk dan de input_r selecteren ipv de input.