在调用php函数之前验证html5表单?

I currently have a html5 form with a basic text-area inside of it, when you hit the submit button a php script is called that sends the data to the database.

However, before the PHP script is called, I would like to run some validation on the form (checking if it is null etc...) before the PHP is called, preferably in javascript.

Is there a way I can do this?

Thanks.

Html5 form:

<form action="submit.php" method="POST">
            <tr>
                <td id="textBox-back">  
                    <textarea id="rage-box" type="text" name="rage" cols="40" rows="5" maxlength="160"> </textarea>

                    <input id="submit" value="" name="submit" type="submit"/>


                </td>           

        </form>     
<script language="javascript">
   function validate(){

       //Code of validation

       return false;
    }
</script>


<form action="submit.php" method="POST" onsubmit="return validate();">
        <tr>
            <td id="textBox-back">  
                <textarea id="rage-box" type="text" name="rage" cols="40" rows="5" maxlength="160"> </textarea>

                <input id="submit" value="" name="submit" type="submit"/>


            </td>           

    </form>   

You need to add an onclick on your submit or form.

var sub = document.getElementById('submit');
var tex = document.getElementById('rage-box');
sub.onclick = function(e){
  if(tex.value == ''){
     //stopping it from being sent
     e.preventDefault();
     alert('make sure everything is filled out');
  }
}

If you add the event on your form you need to:

  1. Give an id to your form
  2. Get your form and add the form.onsubmit = function(){};
  3. Then just copy the code inside the anonymous function.