Как я могу получить свою электронную html форму для проверки с использованием javascript перед отправкой в ​​php скрипт для отправки - PullRequest
Новая
       9

Как я могу получить свою электронную html форму для проверки с использованием javascript перед отправкой в ​​php скрипт для отправки

0 голосов
/ 04 сентября 2018

У меня есть html-форма запроса по электронной почте, которая проверяет поля формы с помощью javascript и отображает сообщения об ошибках, но она все еще продолжается и фактически отправляет и отправляет форму запроса по электронной почте в любом случае, используя php-скрипт. Я пытаюсь перехватить ошибку (я) перед выполнением фактического php-скрипта, который отправляет электронное письмо. В основном, правильные сообщения об ошибках отображаются для каждого поля формы, когда я нажимаю кнопку отправить сообщение, но вместо того, чтобы позволить мне ввести правильную информацию, он продолжает и выполняет скрипт php send и все равно отправляет электронное письмо. Если какие-либо поля являются неправильными, мне нужно, чтобы они оставались на экране ввода, пока поля не будут введены правильно.

Вот код подтверждения функции: - 

    <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>

Вот код формы: - 

<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>

Большое спасибо

1 Ответ

0 голосов
/ 04 сентября 2018

ОК, обнаружена ошибка в моей функции проверки. Отвечать здесь, так как это может помочь кому-то еще. Я устанавливал статус (следовательно, возвращаемое значение) в true для каждого поля, которое прошло. Это означало, что если последнее поле прошло все критерии, статус для всей формы был возвращен в true. Исправили это, установив начальное значение status = true и закомментировав все остальные экземпляры, которые сбрасывали его в true. Измененный код функции ниже - другой код остается неизменным: - 

    <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>
...