如何讓我的 html 電子郵件表單在發送到 php 腳本進行發送之前使用 javascript 進行驗證

Question

我有一個 html 電子郵件查詢表單，它使用 javascript 驗證表單字段並顯示錯誤消息，但它仍然繼續使用 php 腳本實際上提交並通過電子郵件發送查詢表單。 我試圖在執行發送電子郵件的實際 php 腳本之前捕獲錯誤。 基本上，當我單擊發送消息時，每個表單字段都會顯示正確的錯誤消息，但它不會允許我輸入正確的信息，而是繼續執行 php 發送腳本並發送電子郵件。 如果任何字段不正確，我需要它留在輸入屏幕上，直到正確輸入字段。

這是驗證功能代碼：-

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

非常感謝

Answer 1

好的，發現錯誤出在我的驗證函數中。 在這里回答，因為它可能會幫助其他人。 我將狀態（因此返回值）設置為 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>