Как правильно проверить и отправить форму JavaScript, PHP?

Question

roman-o @roman-o

Как правильно проверить и отправить форму JavaScript, PHP?

Есть форма, проверка осуществляется на JavaScript и хорошо работает, но если не правильное значение все равно отправляет на PHP обработчик, как сделать чтобы форма отправлялась на обработчик, только когда поля все корректно заполнены

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<form action="kalk_res.php" method="post">


	     <ul class="products-grid first odd">
       <li class="item first"> S1 <input type="text" name="S1" size="3" maxlength=3 onkeypress="return keyPress('0123456789')">см</li>
	   <li class="item first"> S2 <input type="text"  name="S2" size="3" maxlength=3 onkeypress="return keyPress('0123456789')">см</li>
	   <li class="item first"> S3 <input type="text" name="S3" size="2" maxlength=2 onkeypress="return keyPress('0123456789')" >см</li>
			 
			  <script>
    function showError(container, errorMessage) {
      container.className = 'error';
      var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
    }

    function resetError(container) {
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }

    function validate(form) {
      var elems = form.elements;

    
    
    resetError(elems.S1.parentNode);
      if (!elems.S1.value) {
        showError(elems.S1.parentNode, ' Укажите значение.');
      } else if (elems.S1.value < 40 ) {
        showError(elems.S1.parentNode, ' Меньше допустимого значения.'); 

      } else if (elems.S1.value > 110 ) {
        showError(elems.S1.parentNode, ' Больше допустимого значения.');
      }
    
    
      resetError(elems.S2.parentNode);
      if (!elems.S2.value) {
        showError(elems.S2.parentNode, ' Укажите значение.');
      } else if (elems.S2.value < 179 ) {
        showError(elems.S2.parentNode, ' Меньше допустимого значения.');
      } else if (elems.S2.value > 236 ) {
        showError(elems.S2.parentNode, ' Больше допустимого значения.');
      }

      resetError(elems.S3.parentNode);
      if (!elems.S3.value) {
        showError(elems.S3.parentNode, ' Укажите значение.');
      } else if (elems.S3.value < 5 ) {
        showError(elems.S3.parentNode, ' Меньше допустимого значения.');
      } else if (elems.S3.value > 60 ) {
        showError(elems.S3.parentNode, ' Больше допустимого значения.'); return false;
      }

    }
				  
  </script>	 		 
			 <script type="text/javascript">
function keyPress(AvaiableSymbol) {
SearchChar=String.fromCharCode(window.event.keyCode);
if(AvaiableSymbol.indexOf(SearchChar.toUpperCase())<0)return false;
}
</script>
	</ul>
 <input type="submit" onclick="validate(this.form)" value="Отправить">
  </form>