How to properly validate and submit a JavaScript, PHP form?

Question

PHP

There is a form, the check is carried out in JavaScript and works well, but if the wrong value is still sent to PHP by the handler, how to make the form sent to the handler only when the fields are all correctly filled

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

Answer 1

Use some validator , or write your own.