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

javascript jquery html css web

41,285

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

41,285

Author by

4127157

I'm a newbie to Web Design and Development. Know Java, HTML, CSS, JavaScript/jQuery in bits and pieces. Doing Android development as of now.

Updated on July 09, 2022

Comments

4127157 almost 2 years

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:

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
  <link rel='stylesheet' href='stylesheet.css' type='text/css'/>
  <script type='text/javascript' src='script.js'></script>
</head>
<body>
 <form>
  First Name : <input type='text' id='fname' placeholder='Enter First Name'><br><br>
  Last Name : <input type='text' id='lname' placeholder='Enter Last Name'><br><br>
  Age : <input type='text' id='age' placeholder='Age'><br><br>
  Sex : <input type='radio' class='sex'> Male <input type='radio' class='sex'> Female
 </form>
 <button id='submit'>Submit</button>
</body>
</html>

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, two different type. Have to check if user chose anything or not*/

  $("#submit").click(function()
  {
   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");
   }
  });
});

I don't need a very complicated code and please help me in the HTML department if something is wrong there or if something needs to be added there.

Also, I don't know how to get different elements in a class. I have put a comment in my jQuery regarding that so please help if you can.

This is a problem in a CodeCademy project and this is where a lot of newbies in JS and jQuery have a problem, so if you can help, it'll help a lot of people and not just me.

Thanks!

4127157 about 10 years

I corrected that but now even if I input the first name it says Please enter a first name.
Felix about 10 years

Did you check my demo? You need to put the variables inside click handler to get the values inside your textboxes in real time. Please check my answer again.
4127157 about 10 years

Sorry I didn't look at that. And how do I check if the user has ticked either option in sex or not? I don't know how to handle that. There are two options in the same class of both radio type inputs.
4127157 about 10 years

I want to check if the user has ticked on any of the two or not.
4127157 about 10 years

what does this line mean? (!current.checked && i == (len-1) ?
TiltedListener about 10 years

That's checking two things. First, if we DON'T have a checked radio and we just hit the last element in the list. In other words, we went through the whole list and on the last item, we still don't see a checked radio item.