javascript - Trouble submitting my form (with jQuery validation) to the same page with $_POST -

i have form uses jquery system verify input. default way works, if there no errors, submit. pretty bad javascript, question is:

how go making submit same page , put inputs in $_post variable, can execute php code handle data, while having jquery validation working?

what i've noticed:

• the type submit button must set type="button" validator work
• having type set button, makes <form> not submittable

php snippet validate input (see if posted $_post variable):

if(isset($_post)){     $username = $_post['username'];     $email = $_post['email'];     $password = $_post['password'];     echo $username."<br>".$email."<br>".$password; } 

the script form:

<form action="" method="post"> <table border=0 id="form" style="padding:10px;">     <tr>         <td>             username         </td>         <td align=left>             <input name="username" type="text" size="20" jval="{valid:function (val) { if (val.length < 3) return 'invalid name'; else return ''; }}">         </td>     </tr>     <tr>         <td>             email address         </td>         <td align=left>             <input name="email" type="text" size="40" jval="{valid:/^[a-za-z0-9._%+-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4}$/, message:'invalid email address'}" jvalkey="{valid:/[a-za-z0-9._%+-@]/, cfunc:'alert', cargs:['email address: '+$(this).val()]}">         </td>     </tr>     <tr>         <td>             password         </td>         <td align=left>             <input name="password" id="password" type="password" jval="{valid:function (val) { if (val.length < 4) return false; else return true; }, message:'password of 4 or more characters required'}">         </td>     </tr>     <tr>         <td style="padding-right:20px;">             verify password         </td>         <td align=left>             <input name="passwordconfirm" id="passwordverify" type="password" jval="{valid:function (val) { if ( val != eval('$(\'#password\').val()') ) return false; else return true; }, message:'password , verify password must match'}">         </td>     </tr>     <tr>         <td>             <input type="hidden" name="antispam" value="banana" />             <script>             var antispam = function() {                 if (document.getelementbyid("antispam")) {                         = document.getelementbyid("antispam");                         if (isnan(a.value) == true) {                                 a.value = 0;                         } else {                                 a.value = parseint(a.value) + 1;                         }                 }                 settimeout("antispam()", 1000);             }             antispam();             </script>         </td>     </tr>     <tr>         <td></td>         <td>             <input id="submitbutton" type="button" value="click here register!" onclick="if ( $('#form').jval({style:'blank',padding:8,border:0,wrap:false}) ){ this.form.submit;}">         </td>     </tr> </table> </form> 

if needed, files corresponding jval system (validation) can found here, not needed.

thanks ahead

ps. please not go saying "narrow down problem", when had narrowed down , posted specific code snippets, told post entire code, here is.

1. use html5 validation , <input> types. browser can validate e-mail addresses better can, example.

2. drop spam protection; prevent actual users using page. use recaptcha.

3. don’t use tables layout. please? @ least, use css instead of align attribute.

4. don’t assume everyone’s name @ least 3 characters long.

<form method="post">     <table border="0" id="form" style="padding: 10px;">         <tr>             <td>                 username             </td>             <td align="left">                 <input name="username" type="text" size="20" required />             </td>         </tr>         <tr>             <td>                 email address             </td>             <td align="left">                 <input name="email" type="email" size="40" required />             </td>         </tr>         <tr>             <td>                 password             </td>             <td align="left">                 <input name="password" id="password" type="password" required />             </td>         </tr>         <tr>             <td style="padding-right:20px;">                 verify password             </td>             <td align="left">                 <input name="passwordconfirm" id="password-confirm" type="password" required />             </td>         </tr>         <tr>             <td></td>             <td>                 <button>click here register!</button>             </td>         </tr>     </table> </form>