JQuery validatie
Quote:
Hallo,
ik ben bezig met een contact formulier en heb het
voor mekaar gekregen om met JQuery een aantal velden te valideren.
dit wordt in werking gezet bij de submit
ik ben bezig met een contact formulier en heb het
voor mekaar gekregen om met JQuery een aantal velden te valideren.
dit wordt in werking gezet bij de submit
$(document).ready(function()
{
$("form#contactform").submit(function()
{
if ($("input#voornaam").val() == "")
{
alert("Vul uw 'voornaam' in!");
return false;
}
if else ($("input#achternaam").val() == "")
alert("Vul uw 'voornaam' in!");
return false;
}
});
});
<tr>
<td>Voornaam: *</td>
<td><input type="text" id="voornaam" name="voornaam" title="Voornaam" /></td>
</tr>
Quote:
dit gaat allemaal goed, maar hoe krijg ik dit met bovenstaand voorbeeld voor mekaar bij het checken van email adressen en radio buttons dit is het geen waar ik ff niet uit kom.
alvast bedankt
alvast bedankt
Maar des al niettemeer bedankt voor je reactie.
- Een quote is citaat. Je gebruikt de quote tag als je iemand dus citeert
=> Je eigen tekst is dus geen quote
- Elk develop forum heeft code tags ingebouwd. 99% van deze gevallen zijn de code tags [code], gebruik deze dus ook
- Gebruikt punten en hoofdletters in je bericht, zodat alles goed leesbaar is.
Toevoeging op 14/11/2011 19:34:38:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function()
{
$("form#contactform").submit(function()
{
if ($("input#voornaam").val() == "")
{
alert("Vul uw 'voornaam' in!");
return false;
}
if else ($("input#achternaam").val() == "")
{
alert("Vul uw 'achternaam' in!");
return false;
}
});
});
Form etc......
<tr>
<td>Voornaam: *</td>
<td><input type="text" id="voornaam" name="voornaam" title="Voornaam" /></td>
</tr>
{
$("form#contactform").submit(function()
{
if ($("input#voornaam").val() == "")
{
alert("Vul uw 'voornaam' in!");
return false;
}
if else ($("input#achternaam").val() == "")
{
alert("Vul uw 'achternaam' in!");
return false;
}
});
});
Form etc......
<tr>
<td>Voornaam: *</td>
<td><input type="text" id="voornaam" name="voornaam" title="Voornaam" /></td>
</tr>
- Gebruik de html label tag
- JavaScript altijd vlak voor </body> uitvoeren
- form#contactform is trager dan #contactform, en #contactform kan toch alleen maar 1 element zijn. Het is dus beter om #contactform te gebruiken en niet met form ervoor
- Gebruik geen alerts meer, deze zijn onderwets. Gebruik console.log en gebruik de JavaScript console (voor FireFox moet je hiervoor FireBug installeren) voor het debuggen en voor de gebruiker laat je het mooi in een daarvoor bestemde lijst zetten. (<ul><li></li></ul>)
- if else in javascript, het is else if of alleen else. If else kan nooit
- Laat met validatie altijd in 1 keer alle foutmeldingen zien, zo weet de gebruiker in 1 keer wat er veranderd moet worden. else if kan dus beter if zijn
En verder:
Quote:
Omdat ik zelf een programmeur ben en daarom wil leren hoe het op een andere mannier ook zou kunnen.
Je moet niet alles zelf willen maken. Zodra er zo'n uitstekende plugin is is het veel beter om die gewoon te maken. Als je alles wilt maken ben je tevergeefs 10tallen uren kwijt.
En daarnaast, je gebruikt wel jQuery. Waarom wil je het dan niet met raw JavaScript schrijven, nu weet je nog steeds niet wat er eigenlijk gebeurd.
Gewijzigd op 14/11/2011 20:01:36 door Wouter J
Wouter J op 14/11/2011 20:00:06:
- JavaScript altijd vlak voor </body> uitvoeren
Hoezo? Hij gebruik toch document.ready()
Wouter J op 14/11/2011 20:00:06:
- form#contactform is trager dan #contactform, en #contactform kan toch alleen maar 1 element zijn. Het is dus beter om #contactform te gebruiken en niet met form ervoor
Is nihil, maak je maar zorgen over belangrijkere dingen.
Wouter J op 14/11/2011 20:00:06:
- Gebruik geen alerts meer, deze zijn onderwets. Gebruik console.log en gebruik de JavaScript console (voor FireFox moet je hiervoor FireBug installeren) voor het debuggen en voor de gebruiker laat je het mooi in een daarvoor bestemde lijst zetten. (<ul><li></li></ul>)\
Sinds wanneer is dit een vereiste? TS mag zelf bepalen wat hij wel / niet wil gebruiken. Dit is hoogstens een tip. Klinkt nu alsof zijn leven ervan afhangt.
Wouter J op 14/11/2011 20:00:06:
En verder:
Je moet niet alles zelf willen maken. Zodra er zo'n uitstekende plugin is is het veel beter om die gewoon te maken. Als je alles wilt maken ben je tevergeefs 10tallen uren kwijt.
En daarnaast, je gebruikt wel jQuery. Waarom wil je het dan niet met raw JavaScript schrijven, nu weet je nog steeds niet wat er eigenlijk gebeurd.
Quote:
Omdat ik zelf een programmeur ben en daarom wil leren hoe het op een andere mannier ook zou kunnen.
Je moet niet alles zelf willen maken. Zodra er zo'n uitstekende plugin is is het veel beter om die gewoon te maken. Als je alles wilt maken ben je tevergeefs 10tallen uren kwijt.
En daarnaast, je gebruikt wel jQuery. Waarom wil je het dan niet met raw JavaScript schrijven, nu weet je nog steeds niet wat er eigenlijk gebeurd.
[/quote]
Onzin, door iets na te maken en bestaande code als referentie te gebruiken is een uitstekend leermiddel. Alles maar downloaden en hopen dat het werkt leer je natuurlijk niks van.
Daarnaast hoeft de TS sowieso geen raw javascript te gebruiken. Ook het werken in jQuery is een uitstekend leer proces.
Synaps Framework op 14/11/2011 20:30:02:
Hoezo? Hij gebruik toch document.ready()
Wouter J op 14/11/2011 20:00:06:
- JavaScript altijd vlak voor </body> uitvoeren
Hoezo? Hij gebruik toch document.ready()
Daar heeft Wouter J wel gelijk in. Sommige browsers renderen content al tijdens het binnenkrijgen van de pagina. Daarmee scheelt het in de beleving van de gebruiker tijd totdat de site geladen is. Het verschil is natuurlijk nihil in deze situatie maar kan ook anders zijn ;)
Synaps Framework op 14/11/2011 20:30:02:
Onzin, door iets na te maken en bestaande code als referentie te gebruiken is een uitstekend leermiddel. Alles maar downloaden en hopen dat het werkt leer je natuurlijk niks van.
Daarnaast hoeft de TS sowieso geen raw javascript te gebruiken. Ook het werken in jQuery is een uitstekend leer proces.
Daarnaast hoeft de TS sowieso geen raw javascript te gebruiken. Ook het werken in jQuery is een uitstekend leer proces.
En ik denk dat hij NOG meer leert als hij probeert deze bestaande plugin probeert te extenden en het naar zijn smaak te maken..
En op de overige punten kan ik Wouter geen ongelijk geven. Misschien komt het een beetje over alsof je het zo moet doen maar de TS beslist zelf natuurlijk. Ik denk dat het niet meer als een dringend advies is ;)
Gewijzigd op 14/11/2011 21:52:57 door kees Schepers
Quote:
Alles maar downloaden en hopen dat het werkt leer je natuurlijk niks van.
Nee, natuurlijk niet. Dat beweer ik ook niet. Ik beweer wel dat als er al zo'n uitstekende plugin is je dat gewoon het best kan gebruiken.
Quote:
Hoezo? Hij gebruik toch document.ready()
Als eerste gebruikt hij $(document).ready() en ten tweede is dit een stuk sneller met laden. Als eerst de HTML en CSS geladen en uitgevoerd wordt kan de gebruiker de site al zien en lezen, als daarna de JS er nog bij komt (vooral met dingen als validatie, cufon moet wel bovenin) heeft de gebruiker er geen erg in.
Quote:
Sinds wanneer is dit een vereiste? TS mag zelf bepalen wat hij wel / niet wil gebruiken. Dit is hoogstens een tip. Klinkt nu alsof zijn leven ervan afhangt.
Natuurlijk hangt zijn leven er niet vanaf, ik geef hem alleen tips om zijn script te verbeteren. Via console.log krijg je veel meer en betere informatie over die variabelen/tekst.
En zeg nou zelf, zodra je op een gewone website komt en je ziet een alert dan begin je ook te twijfelen over de goedheid van de site. Dus je gaat dan al snel over in errors weergeven op de site en als je dat dan via correcte HTML wilt doen zul je een list moeten gebruiken.
Code (php)
1
2
3
4
2
3
4
function validateEmail(emailAddress){
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
}
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
}
Bedankt Ger dat is wat ik zogt
Quote:
Je wilt gewoon kunnen knippen en plakken? En zodra het niet werkt kom je weer terug om weer een direct juiste code van ons te verwachten?
dit slaat natuurlijk nergens op, ik zeg namelijk helemaal niet dat ik jullie / jou tips op het verbeteren van mijn script niet uitwerk en alles maar knip en plak, ik was namelijk ook gewoon van plan om de JQuery code van Ger weer verder uit te werken.