I have an html email enquiry form that validates the form fields using javascript and displays the error messages but it still continues and actually submits and emails the enquiry form anyway using a php script. I am trying to trap the error(s) before the actual php script that sends the email is executed. Basically the correct error messages are displayed for each form field when I click send message but instead of allowing me to enter the correct information it continues and executes the php send script and sends the email anyway. If any fields are incorrect I need it to stay on the input screen until the fields are entered correctly.
Here is the validate function code :-
<script>
function validate(){
var name=document.f1.name.value;
var subject=document.f1.subject.value;
var arrivaldate=document.f1.arrivaldate.value;
var departuredate=document.f1.departuredate.value;
var email=document.f1.email.value;
var stay=document.f1.stay.value;
var message=document.f1.message.value;
var status=false;
if(name.length<4){
document.getElementById("nameloc").innerHTML= "Please enter at least 4 chars";
document.getElementById("nameloc").style.color= "red";
status=false;
}else{
document.getElementById("nameloc").innerHTML="";
status=true;
}
if(subject.length<8){
document.getElementById("subjloc").innerHTML= "Please enter at least 8 chars of subject";
document.getElementById("subjloc").style.color= "red";
status=false;
}else{
document.getElementById("subjloc").innerHTML="";
status=true;
}
if(arrivaldate==""){
document.getElementById("arrivaldateloc").innerHTML= "Please select Arrival date ";
document.getElementById("arrivaldateloc").style.color= "red";
status=false;
}else{
document.getElementById("arrivaldateloc").innerHTML="";
status=true;
}
if(departuredate==""){
document.getElementById("departuredateloc").innerHTML= "Please select Departure date ";
document.getElementById("departuredateloc").style.color= "red";
status=false;
}else{
document.getElementById("departuredateloc").innerHTML="";
status=true;
}
if(email==""){
document.getElementById("emailloc").innerHTML= "Please enter a valid email";
document.getElementById("emailloc").style.color= "red";
status=false;
}else{
document.getElementById("emailloc").innerHTML="";
status=true;
}
if(stay==""){
document.getElementById("stayloc").innerHTML= "Please enter a Stay field max length 30 chars";
document.getElementById("stayloc").style.color= "red";
status=false;
}else{
document.getElementById("stayloc").innerHTML="";
status=true;
}
if(message==""){
document.getElementById("messageloc").innerHTML= "Please enter a message field";
document.getElementById("messageloc").style.color= "red";
status=false;
}else{
document.getElementById("messageloc").innerHTML="";
status=true;
}
return status;
}
</script>
Here is the form code:-
<form id="contact-form" action="http://www.cambodia.me.uk/krdc03/contact_mail.php" method="post" name="f1" onsubmit="return validate()">
<div class="col-md-6">
<div class="form-group">
<label>
Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name"/>
<span id="nameloc"></span>
</div>
<div class="form-group">
<label for="subject">
Our Reference</label>
<input type="text" class="form-control" name="subject" placeholder="Web Enquiry Form" value="Web Enquiry Form" readonly/>
<span id="subjloc"></span>
</div>
<div class="form-group">
<label for="Adate">
Arrival Date</label>
<input type="text" class="startdate form-control" size="30" name="arrivaldate" placeholder="dd/mm/yyyy" />
<span id="arrivaldateloc"></span>
</div>
<div class="form-group">
<label for="Ddate">
Departure Date</label>
<input type="text" class="startdate form-control" name="departuredate" size="30" placeholder="dd/mm/yyyy" />
<span id="departuredateloc"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">
Email Address</label>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Your Email"/>
<span id="emailloc"></span>
</div>
</div>
<div class="form-group">
<label for="stay">
How did you hear about us</label>
<input type="text" class="form-control" name="stay" maxlength="30" placeholder="ie Google, Tripadvisor etc"/>
<span id="stayloc"></span>
</div>
<div class="form-group">
<label for="message">
Message</label>
<textarea class="form-control" name="message" rows="4" placeholder="">
</textarea>
<span id="messageloc"></span>
</div>
</div>
<div class="col-md-12">
<button type="submit" name="submit" class="btn btn-skin pull-right">
Send Message</button>
</div>
</form>
Many thanks
OK, found the error was in my validate function. Answering here as it may help someone else. I was setting status (therefore the return value) to true each field that passed. This meant if last field passed all the criteria the status for the whole form was set back to true. Fixed it by setting initial value of status = true and commenting out all the other instances that reset it to true. Modified function code below - other code remains unchanged:-
<script>
function validate(){
var name=document.f1.name.value;
var subject=document.f1.subject.value;
var arrivaldate=document.f1.arrivaldate.value;
var departuredate=document.f1.departuredate.value;
var email=document.f1.email.value;
var stay=document.f1.stay.value;
var message=document.f1.message.value;
var status=true;
if(name.length<4){
document.getElementById("nameloc").innerHTML= "Please enter at least 4 chars";
document.getElementById("nameloc").style.color= "red";
status=false;
}else{
document.getElementById("nameloc").innerHTML="";
//status=true;
}
if(subject.length<8){
document.getElementById("subjloc").innerHTML= "Please enter at least 8 chars of subject";
document.getElementById("subjloc").style.color= "red";
status=false;
}else{
document.getElementById("subjloc").innerHTML="";
//status=true;
}
if(arrivaldate==""){
document.getElementById("arrivaldateloc").innerHTML= "Please select Arrival date ";
document.getElementById("arrivaldateloc").style.color= "red";
status=false;
}else{
document.getElementById("arrivaldateloc").innerHTML="";
//status=true;
}
if(departuredate==""){
document.getElementById("departuredateloc").innerHTML= "Please select Departure date ";
document.getElementById("departuredateloc").style.color= "red";
status=false;
}else{
document.getElementById("departuredateloc").innerHTML="";
//status=true;
}
if(email==""){
document.getElementById("emailloc").innerHTML= "Please enter a valid email";
document.getElementById("emailloc").style.color= "red";
status=false;
}else{
document.getElementById("emailloc").innerHTML="";
//status=true;
}
if(stay==""){
document.getElementById("stayloc").innerHTML= "Please enter a Stay field max length 30 chars";
document.getElementById("stayloc").style.color= "red";
status=false;
}else{
document.getElementById("stayloc").innerHTML="";
//status=true;
}
if(message==""){
document.getElementById("messageloc").innerHTML= "Please enter a message field";
document.getElementById("messageloc").style.color= "red";
status=false;
}else{
document.getElementById("messageloc").innerHTML="";
//status=true;
}
return status;
}
</script>