1Marcel1966
Gebruiker
- Lid geworden
- 20 aug 2018
- Berichten
- 15
Hoi, Ik ben nieuw in de wereld van programmeren en html en css lukt nu redelijk, maar javascript is voor mij totaal nieuw.
Nu heb ik een contactformulier met validatie in mijn webpagina gemaakt, met javascript.
Als ik de velden invul en op verzenden klik, dan scrollt mijn pagna omhoog naar home. Als ik vervolgens naar mijn contactformulier scroll, dan zijn alle velden nog ingevuld en de validaties staan ook nog boven de verzendbutton.
Middels formspree.io probeer ik het contactformulier naar mijzelf te verzenden, helaas dus zonder het gewenste resultaat.
Ik hoop dat iemand mij kan helpen, want dinsdag moet ik de website presenteren en het zou mooi zijn als het contactformulier dan ook werkt.
Dit is niet verplicht, maar het zou wel mooi zijn.
Onderstaand heb ik de html code van het contactformulier en daaronder het script.
Ik heb de volgende scripts onderaan mijn webpagina staan:
- js/jquery.min.js, js/bootstrap/bootstrap.min.js, js/responsive-tabs/jquery.responsiveTabs.min.js, js/owl-carousel/owl.carousel.min.js, js/easing/130%20jquery.easing.js, js/custom.js. Alles in deze volgorde, dus als laatste mijn custom.js
<HTML-CODE contactformulier>:
<!-- CONTACT RECHTS -->
<div id="contact-rechts">
<form action="https://formspree.io/<hier stond mijn e-mailadres>" method="POST">
<h4>Stuur ons een bericht</h4>
<p>Neem contact met ons op als u meer informatie wilt</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="naam" class="form-control" id="naam" placeholder="naam">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" class="form-control" id="email" placeholder="Emailadres">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="telefoonnummer" class="form-control" id="telefoonnumer" placeholder="Telefoonnummer">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="onderwerp" class="form-control" id="onderwerp" placeholder="Onderwerp">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" name="bericht" id="bericht" placeholder="Bericht"></textarea>
</div>
<div class="status"></div>
<div class="verzend-btn">
<a class="btn btn-general btn-green" href="#" title="verzenden" type="submit" role="button">Verzenden</a>
</div>
</form>
</div>
<JAVASCRIPT CODE>:
/***************************
- CONTACTFORMULIER -
****************************/
$(document).ready(function () {
$('.verzend-btn').click(function (event) {
console.log('Clicked button');
var naam = $('#naam').val();
var email = $('#email').val();
var onderwerp = $('#onderwerp').val();
var bericht = $('#bericht').val();
var statusElm = $('.status');
statusElm.empty();
if (naam.length >= 3) {
statusElm.append('<div>Naam is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Naam is niet geldig</div>');
}
if (email.length > 5 && email.includes('@') && email.includes('.')) {
statusElm.append('<div>Email is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Email is niet geldig</div>');
}
if (onderwerp.length >= 5) {
statusElm.append('<div>Onderwerp is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Onderwerp is niet geldig</div>');
}
if (bericht.length >= 10) {
statusElm.append('<div>Bericht is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Bericht is niet geldig</div>');
}
});
});
Ik hoop dat iemand mij hiermee kan helpen
Alvast bedankt
Marcel
Nu heb ik een contactformulier met validatie in mijn webpagina gemaakt, met javascript.
Als ik de velden invul en op verzenden klik, dan scrollt mijn pagna omhoog naar home. Als ik vervolgens naar mijn contactformulier scroll, dan zijn alle velden nog ingevuld en de validaties staan ook nog boven de verzendbutton.
Middels formspree.io probeer ik het contactformulier naar mijzelf te verzenden, helaas dus zonder het gewenste resultaat.
Ik hoop dat iemand mij kan helpen, want dinsdag moet ik de website presenteren en het zou mooi zijn als het contactformulier dan ook werkt.
Dit is niet verplicht, maar het zou wel mooi zijn.
Onderstaand heb ik de html code van het contactformulier en daaronder het script.
Ik heb de volgende scripts onderaan mijn webpagina staan:
- js/jquery.min.js, js/bootstrap/bootstrap.min.js, js/responsive-tabs/jquery.responsiveTabs.min.js, js/owl-carousel/owl.carousel.min.js, js/easing/130%20jquery.easing.js, js/custom.js. Alles in deze volgorde, dus als laatste mijn custom.js
<HTML-CODE contactformulier>:
<!-- CONTACT RECHTS -->
<div id="contact-rechts">
<form action="https://formspree.io/<hier stond mijn e-mailadres>" method="POST">
<h4>Stuur ons een bericht</h4>
<p>Neem contact met ons op als u meer informatie wilt</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="naam" class="form-control" id="naam" placeholder="naam">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" class="form-control" id="email" placeholder="Emailadres">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="telefoonnummer" class="form-control" id="telefoonnumer" placeholder="Telefoonnummer">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="onderwerp" class="form-control" id="onderwerp" placeholder="Onderwerp">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" name="bericht" id="bericht" placeholder="Bericht"></textarea>
</div>
<div class="status"></div>
<div class="verzend-btn">
<a class="btn btn-general btn-green" href="#" title="verzenden" type="submit" role="button">Verzenden</a>
</div>
</form>
</div>
<JAVASCRIPT CODE>:
/***************************
- CONTACTFORMULIER -
****************************/
$(document).ready(function () {
$('.verzend-btn').click(function (event) {
console.log('Clicked button');
var naam = $('#naam').val();
var email = $('#email').val();
var onderwerp = $('#onderwerp').val();
var bericht = $('#bericht').val();
var statusElm = $('.status');
statusElm.empty();
if (naam.length >= 3) {
statusElm.append('<div>Naam is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Naam is niet geldig</div>');
}
if (email.length > 5 && email.includes('@') && email.includes('.')) {
statusElm.append('<div>Email is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Email is niet geldig</div>');
}
if (onderwerp.length >= 5) {
statusElm.append('<div>Onderwerp is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Onderwerp is niet geldig</div>');
}
if (bericht.length >= 10) {
statusElm.append('<div>Bericht is geldig</div>');
} else {
event.preventDefault()
statusElm.append('<div>Bericht is niet geldig</div>');
}
});
});
Ik hoop dat iemand mij hiermee kan helpen
Alvast bedankt
Marcel