Question

I’m trying to check that the fields in the form below have been filled before it can be inserted into a database e.g. display a pop up with the fields that have not been filled in. It is just a simple Registration form.

<form name="form1" method="post" action="signup_ac.php">
<strong>Sign up</strong>
Username:<input name="username" type="text" id="username" size="30">
Password:<input name="password" type="password" id="password" size="15">
Name:<input name="name" type="text" id="name" size="30">
<select name="Month">
<option selected>Month</option>
<option value="January">January</option>
<option value="Febuary">Febuary</option
  </select> 
<select name=Year>
<option selected>Year</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
 </select>
<input type="submit" name="Submit" value="Submit"> &nbsp;
<input type="reset" name="Reset" value="Reset">
</form>

How do I do this using JavaScript or jQuery.

Answer 1

First of all, download the jQuery validate plugin and add it to your page. Then give each input you want to make a required field a class of required. Then in jQuery:

$(function() {
    $("form").validate();
});

The validate plugin is very feature rich, so you can have different types of message displayed, different validation checks etc should you require. There’s more information on that in the documentation.

Finally, as with all javascript front-end validation, make sure you validate user input on the server side too, just in case a user has javascript turned off in their browser.