How to do simple client-side form validation using JavaScript/jQuery?

Question

I was doing a project series on CodeCademy and I got a project in the series to do a client side form validation using JavaScript/jQuery. My HTML is: ``` Form Validation ``` My JavaScript/jQuery is: ``` $(document).ready(function() { var fname = document.getElementById('fname').val(); var lname = document.getElementById('lname').val(); var age = document.getElementById('age').val(); /*Do not know how to get element by class and that too, t…

Accepted Answer

You need to use `.value` instead of `.val()` since you're using pure Javascript:

```
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var age = document.getElementById('age').value;
```

if you want to use `.val()` method then you need a jQuery object:

```
var fname = $('#fname').val();
var lname = $('#lname').val();
var age = $('#age').val();
```

You also need to put those variables inside `.click()` handler in order to get the updated value of these textboxes, currently you only retrieve the value on page load which is always equal to `0`:

```
$(document).ready(function () {
    $("#submit").click(function () {
        var fname = document.getElementById('fname').value;
        var lname = document.getElementById('lname').value;
        var age = document.getElementById('age').value;

if (fname.length == 0) {
            alert("Please input a first name");
        } else if (lname.length == 0) {
            alert("Please input a last name");
        } else if (age.length == 0) {
            alert("Please input an age");
        }
    });
});
```

Fiddle Demo

How to do simple client-side form validation using JavaScript/jQuery?

Solution

Problem