How to check if text fields are empty on form submit using jQuery?

Question

How could I use jQuery to check if text-fields are empty when submitting without loading login.php?

<form action="login.php" method="post">     <label>Login Name:</label>     <input type="text" name="email" id="log" />     <label>Password:</label>     <input type="password" name="password" id="pwd" />     <input type="submit" name="submit" value="Login" /> </form> 

Thanks.

Answer 1

You can bind an event handler to the "submit" JavaScript event using jQuery .submit method and then get trimmed #log text field value and check if empty of not like:

$('form').submit(function () {      // Get the Login Name value and trim it     var name = $.trim($('#log').val());      // Check if empty of not     if (name  === '') {         alert('Text-field is empty.');         return false;     } }); 

FIDDLE DEMO

Answer 2

You can use 'required' http://jsbin.com/atefuq/1/edit

<form action="login.php" method="post">     <label>Login Name:</label>     <input required type="text" name="email" id="log" />     <label>Password:</label>     <input required type="password" name="password" id="pwd" />     <input  required type="submit" name="submit" value="Login" /> </form>