javascript - Trying to validate a form client and server side -

the client side validation looks this:

function validatefname() {     var x = document.getelementbyid('fname').value;      if (x==null || x=="")     {     alert("first name must filled out");     return false;     } } 

the server side below it:

if(isset($_post['submitform'])){ if(empty($_post['fname'])){     echo "first name cannot empty!<br/><br/>";     return false; } 

and form below that:

<form name = 'checkout' method='post' action="<?php echo $_server['php_self']; ?>" accept-charset='utf-8'> first name:<input type="text" name="fname" id="fname" onsubmit="return validatefname()" class="required" value="<?php echo $fname;?>" /> <input type="submit" name="submitform" value="send"/> 

ofcourse there lot more ive given 1 example above. trying figure out why (clientside)javascript function not working , instead (server) php error coming up. need able have client run validation checks before server reduce load.

the onsubmit event belongs <form> element. have placed submit button won't work.

here's working fiddle:

demo

reference