Question

86

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

rated 0 times [ 89] [ 3] / answers: 1 / hits: 42842 / 10 Years ago, thu, may 15, 2014, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hadens

Add To Favorites

Follow

Total Points: 142

Total Questions: 98

Total Answers: 100

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

answered 10 Years ago myakylas · 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