Basic form validation with Javascript

Question

I am trying to understand the function at (http://www.w3schools.com/js/js_form_validation.asp) and rework it (below) using getElementsByClassName to find a class attribute I added to an HTML input tag. I'm very new to Javascript, and I do not understand why I have to add .value (W3 example) or .view (my example) to the end of the statement below in order for it to work. As I understand it the first statement in the function says look in the document, and assign the variable X, to any input fields with the class attribute reqname.

Thank you.

MY FUNCTION:

function validateForm()
{
var x=document.getElementsByClassName("reqname").view;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

FUNCTION AT W3:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

Please be careful with w3schools tutorials.

Pointy
– Pointy

2012-09-27 14:09:17 +00:00
Commented Sep 27, 2012 at 14:09 — Pointy
– Pointy, Commented Sep 27, 2012 at 14:09
stackoverflow.com/questions/17817/…

Ja͢ck
– Ja͢ck

2012-09-27 14:11:43 +00:00
Commented Sep 27, 2012 at 14:11 — Ja͢ck
– Ja͢ck, Commented Sep 27, 2012 at 14:11

David Hedlund · Accepted Answer · 2012-09-27 14:12:05Z

A form element such as an input field typically has a value, that is the string that has been entered into the input field.

By specifying .value, they explicitly check whether the content of the element is null. Without it, they'd be checking if the element itself is null, i.e. if the element exists.

Your code has some further issues. .view that you're using doesn't make sense. Also, getElementsByClassName returns a list of elements, rather than a single element, so you won't be able to immediately access its .value.

If you know that there's just the one element, you could check getElementsByClassName("reqname")[0].value. If you want to validate the value of all "reqname" fields, you'd have to iterate over your collection and check each item individually:

var elements =document.getElementsByClassName("reqname");
for(var i = 0, l = elements.length; i < l; i++) {
   var x = elements[i].value;
   if(x == null || x == '') {
      alert("First name must be filled out");
      return false;
   }
}

Thank you David. I will take a look at the tutorial you posted also.
I could not understand why my made up word (view) was working... "blah" was also working so I knew something was wrong. It was essentially a typo but I realized it was working.
var x = ...view would assign undefined to x. undefined == null equals true, so your validation would say that "first name must be filled out" regardless of whether or not there was any value in that field.

foaly · Accepted Answer · 2012-09-27 14:17:21Z

0

the input field has more properties than just it's 'value' (which is the text being written in it). So you'll have to state which property you want to access by appending the name (in your case 'value') with a '.'. If you really want to do form validation, also be sure to do it in your php file as well ! Everything javascript does is on the client side, so people can - basically - ignore it and just send some random data to your .php file.

answered Sep 27, 2012 at 14:17

foaly

3522 gold badges3 silver badges10 bronze badges

2 Comments

KMcA Over a year ago

I'm sure this is a horribly easy questions, but where can I find the other properties of the input field, and do I access them with dot notation just like any other property? JS is my very first language and I have only been doing this for a few weeks so while I know I would have to do server side validation I'm starting here for now. Thank you so much.

foaly Over a year ago

generally, google will help you with that. I find that w3schools' page often is a good resource for things like this. see here: w3schools.com/jsref/dom_obj_text.asp since js is your first language: keep in mind that validating forms with js only makes sense to optimize user-experience (don't have to reload the page). In any case, you have to do form-validation on the server side again.

David Hedlund · Accepted Answer · 2012-09-27 14:19:09Z

0

may be useful to:

http://tetlaw.id.au/view/javascript/really-easy-field-validation

jquery-plugin

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

edited Sep 27, 2012 at 14:19

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

answered Sep 27, 2012 at 14:14

yasaricli

2,53322 silver badges31 bronze badges

Comments

arnoldrob · Accepted Answer · 2012-09-27 14:16:44Z

-2

it's more simple to write

function ValidateForm() {
    var x = $("#inputOID").val();
    if (x == null || x == "")
        alert("......");
    return false;
}

so your function is ValidateForm. You declare a variable x, and give the value from an input by the input ID. For example <input id="inputOID" .... />. So x will contain the value of the input. The you verify if is null or empty, and if is you will alert the user. Thats all! Good luck!

answered Sep 27, 2012 at 14:16

arnoldrob

8333 gold badges9 silver badges15 bronze badges

1 Comment

David Hedlund Over a year ago

This function requires jQuery, which doesn't seem to exist in the document, and it also returns false regardless of whether or not the field has a value.

Collectives™ on Stack Overflow

Basic form validation with Javascript

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Linked

Related