title: How prevent user to change form input value from browser debug tools?
body: <p>I would like to create a HTML form ,the user can input his name and submit, but the user does not fill in the name input, the system will not submit and show the error message in alert box.</p>
  
  <p>Here is my code about form.php</p>
  
  <pre><code>&lt;form name="myForm" action="b.php" method="post"&gt;
  Name: &lt;input type="text" name="fname"&gt;
  &lt;input type="submit" value="Submit" onclick="return validateForm()"&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  function validateForm() {
      var x = document.forms["myForm"]["fname"].value;
      if (x == "") {
          alert("Name must be filled out");
          return false;
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and submit successful,the information will go to this page b.php
  b.php</p>
  
  <pre><code>    &lt;?php
  echo $_POST[fname];
  ?&gt;
  </code></pre>
  
  <p>But When the user use browser debug tools(like chrome),They can change form input "name" "id" "class" .etc value, In this case, when the user change the form name value, the form can submit without fill in the name.</p>
  
  <p>any idea to solve this problem.....or use javascript to Validation is not a good choice????? Thanks<a href="https://i.stack.imgur.com/qHAFB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qHAFB.jpg" alt="enter image description here"></a></p>
  
  <p>enter image description here</p>
  
  <p><a href="https://i.stack.imgur.com/HiW85.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HiW85.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/1MgLf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1MgLf.jpg" alt="enter image description here"></a></p>