聯系表格 javascript 和 php

Question

首先，我是網站創建的新手，尤其是 php。

我為我的網站創建了一個聯系表單，其中包含驗證和在所有內容填寫正確時顯示的消息（請參見下面的代碼段）。 我知道必須在客戶端和服務器端都進行驗證，但我知道我正在處理其他事情。

我創建了一個有效的 php 文件：當用戶單擊提交時，我收到了電子郵件。

我面臨兩件事。

1. 如何在前端保留 javascript 驗證和消息？

2. 如何配置 php 以留在頁面上，或者更好的是，在后面運行並且只將表單提交到我的電子郵件？

 <?php

if(isset($_POST['submit'])){
  
  
  $mailto = "contact@statsmap.ch"; //Send the email to this adress
  
  //All the inputs informations
  $mailfrom = $_POST['email'];
  $name = $_POST['name'];
  $subject = $_POST['subject'];
  //$message = "NAME: " .$name. "\r\n\n". "Wrote the following Message:" ."\r\n". $_POST['message'];
  $message = $_POST['message'];
  $headers = "From: ". $mailfrom; 
  $sendMail = mail($mailto, $subject, $message, $headers); // Send mail to website owner
  


}

?> 

 const form = document.getElementById('formContact'); const nameContact = document.getElementById('name'); const emailContact = document.getElementById('email'); const messageContact = document.getElementById('message'); const headerContact = document.querySelector('.headerContact') const thankYou = document.querySelector('.Thankyou'); const isValidEmail = (email) => { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }; let isValid = true; function checkInputs(){ //get the values from the inputs or textarea const nameValue = nameContact.value.trim(); const emailValue = emailContact.value.trim(); const messageValue = messageContact.value.trim(); if (nameValue === ''){ //show error //add error class setErrorFor(nameContact, 'Name cannot be blank'); } else{ //add success class setSuccesFor(nameContact); } if (emailValue === ''){ //show error //add error class setErrorFor(emailContact, 'Email cannot be blank'); } else if(!isValidEmail(emailValue)){ setErrorFor(emailContact, 'Please add a valid email adress'); } else{ setSuccesFor(emailContact); } if (messageValue === ''){ //show error //add error class setErrorFor(messageContact, 'Message cannot be blank'); } else if (messageValue.length < 20){ setErrorFor(messageContact, 'Message need to be at least 20 characters'); } else{ //add success class setSuccesFor(messageContact); } } function setErrorFor(input, message){ isValid=false; const formControl = input.parentElement; const errorContactMessage = formControl.querySelector('#Error'); //add error message inside the span errorContactMessage.innerText = message; //add error class formControl.className = 'form-control error'; } function setSuccesFor(input){ const formControl = input.parentElement; const errorContactMessage = formControl.querySelector('#Error'); //remove message inside the span errorContactMessage.innerText=''; //add success class formControl.className = 'form-control success'; } let nameThk = ""; nameContact.addEventListener('input', (e) =>{ nameThk = e.target.value; }); form.addEventListener('submit', () =>{ checkInputs(); if(isValid){ form.remove(); headerContact.classList.add('hide'); thankYou.classList.remove('hide'); document.querySelector('#merci').innerHTML = `<h3>Dear ${nameThk}, thank you for reaching out ! </h3>`; } });

 .containerContact { background-color: #F8F8F8; width: 100%; max-width: 100%; padding: 0.5rem; display: block; } .containerContact h2 { margin-bottom: 0.5rem; } .form-control { margin-bottom: 0.25rem; position: relative; } .form-control input { display: block; width: 100%; height: 2rem; padding-left: 0.5rem; background: transparent; border: 0.025rem solid #000000; outline: none; font-size: 0.8125rem; color: #000000; } .form-control input::-webkit-input-placeholder { color: #000000; } .form-control input:-ms-input-placeholder { color: #000000; } .form-control input::-ms-input-placeholder { color: #000000; } .form-control input::placeholder { color: #000000; } .form-control textarea { width: 100%; height: 10rem; background: transparent; border: 0.025rem solid #000000; outline: none; font-family: Arial, Helvetica, sans-serif; padding: 0.5rem; font-size: 0.8125rem; color: #000000; resize: none; } .form-control textarea::-webkit-input-placeholder { color: #000000; } .form-control textarea:-ms-input-placeholder { color: #000000; } .form-control textarea::-ms-input-placeholder { color: #000000; } .form-control textarea::placeholder { color: #000000; } .form-control i { position: absolute; top: 0.5rem; right: 0.5rem; visibility: hidden; } .form-control #textareaChecks { position: absolute; top: 8.5rem; right: 0.5rem; } .form-control.success input { border-color: green; } .form-control.success i.fa-check-circle { visibility: visible; color: green; } .form-control.error input { border-color: red; } .form-control.error i.fa-exclamation-circle { visibility: visible; color: red; } .form-control.success textarea { border-color: green; } .form-control.success i.fa-check-circle { visibility: visible; color: green; } .form-control.error textarea { border-color: red; } .form-control.error i.fa-exclamation-circle { visibility: visible; color: red; } #Error { font-weight: 500; font-size: 0.75rem; font-style: italic; color: red; margin: 0; padding: 0; } #ContactSubmit { width: 100%; height: 2rem; background: #1e1e1e; outline: none; border: 0.025rem solid #000000; color: #FFFFFF; } .containerThank { height: 300px; display: -ms-grid; display: grid; } .containerThank h3 { margin: 0; text-align: center; -ms-flex-item-align: end; align-self: flex-end; font-size: 18px; font-weight: bold; } .containerThank p { -ms-flex-item-align: start; align-self: flex-start; text-align: center; font-size: 13px; padding-top: 0.5rem; } .hide { display: none; }

 <form action="/php/contactMail.php" method="POST" class="formContact" id="formContact" novalidate> <div class="form-control"> <input type="text" name="name" id="name" placeholder="First and Last name"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <div class="form-control"> <input type="email" name="email" id="email" placeholder="Please enter your email"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <div class="form-control"> <input type="text" name="subject" id="subject" placeholder="Subject"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <div class="form-control"> <textarea id="message" name="message" type="text" placeholder="Message"></textarea> <i id="textareaChecks" class="fas fa-check-circle"></i> <i id="textareaChecks" class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <button id="ContactSubmit" name="submit">Submit</button> </form> <div class="Thankyou hide"> <div class="containerThank"> <h3 id="merci"></h3> <p>Our team is going to get back to you as soon as possible</p> </div> </div> </div> </div> </section> </div>

Answer 1

看起來您檢查了變量 isValid 是否為真，但如果 isValid 為假，您沒有提供替代方案。

基本上，我編輯了這個：

form.addEventListener('submit', (e) =>{
  checkInputs();
  if(isValid){
    form.remove();
    headerContact.classList.add('hide');
    thankYou.classList.remove('hide');
    document.querySelector('#merci').innerHTML = `<h3>Dear ${nameThk}, thank you for reaching out ! </h3>`;
  } else {
    e.preventDefault()
  }

如您所見，如果 isValid 為 false，則腳本會阻止表單提交。

工作片段：

 const form = document.getElementById('formContact'); const nameContact = document.getElementById('name'); const emailContact = document.getElementById('email'); const messageContact = document.getElementById('message'); const headerContact = document.querySelector('.headerContact') const thankYou = document.querySelector('.Thankyou'); const isValidEmail = (email) => { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }; let isValid = true; function checkInputs(){ //get the values from the inputs or textarea const nameValue = nameContact.value.trim(); const emailValue = emailContact.value.trim(); const messageValue = messageContact.value.trim(); if (nameValue === ''){ //show error //add error class setErrorFor(nameContact, 'Name cannot be blank'); } else{ //add success class setSuccesFor(nameContact); } if (emailValue === ''){ //show error //add error class setErrorFor(emailContact, 'Email cannot be blank'); } else if(!isValidEmail(emailValue)){ setErrorFor(emailContact, 'Please add a valid email adress'); } else{ setSuccesFor(emailContact); } if (messageValue === ''){ //show error //add error class setErrorFor(messageContact, 'Message cannot be blank'); } else if (messageValue.length < 20){ setErrorFor(messageContact, 'Message need to be at least 20 characters'); } else{ //add success class setSuccesFor(messageContact); } } function setErrorFor(input, message){ isValid=false; const formControl = input.parentElement; const errorContactMessage = formControl.querySelector('#Error'); //add error message inside the span errorContactMessage.innerText = message; //add error class formControl.className = 'form-control error'; } function setSuccesFor(input){ const formControl = input.parentElement; const errorContactMessage = formControl.querySelector('#Error'); //remove message inside the span errorContactMessage.innerText=''; //add success class formControl.className = 'form-control success'; } let nameThk = ""; nameContact.addEventListener('input', (e) =>{ nameThk = e.target.value; }); form.addEventListener('submit', (e) =>{ checkInputs(); if(isValid){ form.remove(); headerContact.classList.add('hide'); thankYou.classList.remove('hide'); document.querySelector('#merci').innerHTML = `<h3>Dear ${nameThk}, thank you for reaching out ! </h3>`; } else { e.preventDefault() } });

 .containerContact { background-color: #F8F8F8; width: 100%; max-width: 100%; padding: 0.5rem; display: block; } .containerContact h2 { margin-bottom: 0.5rem; } .form-control { margin-bottom: 0.25rem; position: relative; } .form-control input { display: block; width: 100%; height: 2rem; padding-left: 0.5rem; background: transparent; border: 0.025rem solid #000000; outline: none; font-size: 0.8125rem; color: #000000; } .form-control input::-webkit-input-placeholder { color: #000000; } .form-control input:-ms-input-placeholder { color: #000000; } .form-control input::-ms-input-placeholder { color: #000000; } .form-control input::placeholder { color: #000000; } .form-control textarea { width: 100%; height: 10rem; background: transparent; border: 0.025rem solid #000000; outline: none; font-family: Arial, Helvetica, sans-serif; padding: 0.5rem; font-size: 0.8125rem; color: #000000; resize: none; } .form-control textarea::-webkit-input-placeholder { color: #000000; } .form-control textarea:-ms-input-placeholder { color: #000000; } .form-control textarea::-ms-input-placeholder { color: #000000; } .form-control textarea::placeholder { color: #000000; } .form-control i { position: absolute; top: 0.5rem; right: 0.5rem; visibility: hidden; } .form-control #textareaChecks { position: absolute; top: 8.5rem; right: 0.5rem; } .form-control.success input { border-color: green; } .form-control.success i.fa-check-circle { visibility: visible; color: green; } .form-control.error input { border-color: red; } .form-control.error i.fa-exclamation-circle { visibility: visible; color: red; } .form-control.success textarea { border-color: green; } .form-control.success i.fa-check-circle { visibility: visible; color: green; } .form-control.error textarea { border-color: red; } .form-control.error i.fa-exclamation-circle { visibility: visible; color: red; } #Error { font-weight: 500; font-size: 0.75rem; font-style: italic; color: red; margin: 0; padding: 0; } #ContactSubmit { width: 100%; height: 2rem; background: #1e1e1e; outline: none; border: 0.025rem solid #000000; color: #FFFFFF; } .containerThank { height: 300px; display: -ms-grid; display: grid; } .containerThank h3 { margin: 0; text-align: center; -ms-flex-item-align: end; align-self: flex-end; font-size: 18px; font-weight: bold; } .containerThank p { -ms-flex-item-align: start; align-self: flex-start; text-align: center; font-size: 13px; padding-top: 0.5rem; } .hide { display: none; }

 <form action="/php/contactMail.php" method="POST" class="formContact" id="formContact" novalidate> <div class="form-control"> <input type="text" name="name" id="name" placeholder="First and Last name"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <div class="form-control"> <input type="email" name="email" id="email" placeholder="Please enter your email"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <div class="form-control"> <input type="text" name="subject" id="subject" placeholder="Subject"> <i class="fas fa-check-circle"></i> <i class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <div class="form-control"> <textarea id="message" name="message" type="text" placeholder="Message"></textarea> <i id="textareaChecks" class="fas fa-check-circle"></i> <i id="textareaChecks" class="fas fa-exclamation-circle"></i> <span id="Error"></span> </div> <button id="ContactSubmit" name="submit">Submit</button> </form> <div class="Thankyou hide"> <div class="containerThank"> <h3 id="merci"></h3> <p>Our team is going to get back to you as soon as possible</p> </div> </div> </div> </div> </section> </div>