使用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;
  }
}

Answer 1

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, ie 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;
   }
}

Answer 2

may be useful to:

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

jquery-plugin

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

Answer 3

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.

Answer 4

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!