form doesnt continue until all details entered

Hello i was wondering how can i make the form below not continue without the information being entered so once the button is clicked it shows next to the fields enter details without refreshing i have seen this somewhere but i cant remember

      <td><div align="right"><span class="style6 style16">First Name</span> <font color="red">*</font></div></td>
      <td><div align="left">
        <input name="name_f" class="text2" style="background-color: rgb(255, 255, 160);" value="" size="30" type="text">
      </div></td>
    </tr>
    <tr>

      <td><div align="right"><span class="style16 style6"><strong>Surname</strong></span> <font color="red">*</font></div></td>
      <td><div align="left">
        <input name="name_l" class="text2" style="background-color: rgb(255, 255, 160);" value="" size="30" type="text">
      </div></td>
    </tr>
    <tr>
      <td><div align="right"><b><span class="style6 style16">Your E-Mail Address</span> <font color="red">*</font></b></div></td>

      <td><div align="left">
          <input name="email" class="text2" style="background-color: rgb(255, 255, 160);" value="" size="30" type="text">
      </div></td>
    </tr>
  </tbody>
</table>
<br>
<input id="blabla" name="paysys_id" value="clickbank" type="hidden">
<input name="do_payment" value="1" type="hidden">
<input name="price_group" value="" type="hidden">
<center>
  <input name="submit" class="text2" value="&nbsp;&nbsp;&nbsp;Continue&nbsp;&nbsp;&nbsp;" type="submit">

</center>

Code (markup):

thanks

 

Well, use something like this. On the <input type="submit"... add a onclick event handler that will check the form, and return true in case everything's ok, or false in case something's wrong.

Now, take this part of the code as an example:

<td><div align="right"><span class="style6 style16">First Name</span> <font color="red">*</font></div></td>
      <td><div align="left">
        <input name="name_f" class="text2" style="background-color: rgb(255, 255, 160);" value="" size="30" type="text">
      </div></td>

Code (markup):

Noe, if you want to check the value of "name_f" with javascript, you can do what most people do, call document.<form_name>.<element_name>, but that will only work on IE, or apply a "id2 to the "name_f" element and call it by it's id and get it's "value" property, like this:

<input name="name_f" id="name_f" class="text2" style="background-color: rgb(255, 255, 160);" value="" size="30" type="text">

javascript:

var name_f_value = document.getElementById('name_f').value;

Code (markup):

If you then want to display some message, you add for example a span next to the textfield, like this:

<input name="name_f" id="name_f" class="text2" style="background-color: rgb(255, 255, 160);" value="" size="30" type="text"><span id="name_f_error_box" style="color: red"></span>

Code (markup):

And to check for errors and add a message:

if (name_f_value.length == 0) {
   document.getElementById('name_f_error_box').innerHTML = 'You didn't fill in the name...';
}

Code (markup):

In the end just remember to return true in case everything's ok or false in case of error.