JavaScript表单验证。 如果需要字段，则发送表单事件

Question

I got this form somebody else made. It's a really simple form. Problem is, the client is receiving empty submits. The form already has some validation on it so I'm wondering how can it be submitted.

 function check_message() { var check = true; if (document.getElementById('email').value == '') { check = false; document.getElementById('email').style.border = '3px solid red'; } else { document.getElementById('email').style.border = '1px solid #cccccc'; } if (document.getElementById('telephone').value == '') { check = false; document.getElementById('telephone').style.border = '3px solid red'; } else { document.getElementById('telephone').style.border = '1px solid #cccccc'; } if (check) { document.getElementById('thaForm').submit(); } } 

 <form id="thatForm" name="" action="soumission_process.php" method="post" class="wpcf7-form" novalidate> <input type="text" id="email" name="email" value="" size="40" value=""> <input type="text" id="telephone" name="telephone" value="" size="40" value=""> <input type="button" value="send" onClick="check_message();"> </form> 

In the soumission_process.php, it's just :

$email= $_POST['email'];
$telephone = $_POST['telephone'];

Then mail the stuff...

How could somebody submit the form skipping the validation ? I though maybe the form is just filled with blank space than submitted but there's a required SELECT and it's empty too. If I try myself, I can't submit without filling all the fields and selecting an option in that select.

Help me with that weird Wordpress saved as html site :D

Answer 1

Check form datas in the php script, ex :

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) && (isset($_POST['telephone']) && $_POST['telephone'] != '')){
  $email= $_POST['email'];
  $telephone = $_POST['telephone'];
  // mail datas
}else{
  // do nothing or display error
}

Answer 2

Solution 1 Add required to each field - this will not stop bots from harvesting and submitting post requests to the action

Solution 2

Remove the action and add it if all is ok

In BOTH cases check on the server

 window.addEventListener("load", function() { document.getElementById("thatForm").addEventListener("submit", function(e) { var allOk = 0; var emailField = document.getElementById('email'); var ok = emailField.value.trim() !== '' ? 1 : 0; allOk += ok; emailField.classList.toggle("error", !ok) var telephoneField = document.getElementById('telephone') ok = telephoneField.value.trim() !== '' ? 1 : 0; allOk += ok; telephoneField.classList.toggle("error", !ok) if (allOk !== 2) { e.preventDefault(); } this.action = "soumission_process.php" }); }); 

 .error { border: 3px solid red } 

 <form id="thatForm" method="post" class="wpcf7-form" novalidate> <input type="text" id="email" name="email" value="" size="40" value=""> <input type="text" id="telephone" name="telephone" value="" size="40" value=""> <input type="submit" value="send"> </form>