w3resource

JavaScript: HTML Form Validation

What you will learn

In this tutorial, you will learn how to use JavaScript to validate an HTML form. We have discussed the following HTML Form Validation topics with examples :

What is form validation?

Form validation is the process of making sure that data supplied by the user using a form, meets the criteria set for collecting data from the user.For example, if you are using a registration form, and you want your user to submit name, email id and address, you must use a code (in JavaScript or in any other language) to check whether the user entered a name containing alphabets only, a valid email address and a proper address.

Accessing form data

If an HTML document contains more than one forms, they can be accessed as either by document.form_name where form_name is the value of the name attribute of the form element or by document.forms[i] where i is 0, 1,2,3.... and document.forms[0] refers to the first form of the document, document.forms[1] refers to the second form of the document and so on.

Elements of a form can be accessed by document.form_name.form_element where form_name is the value of the name attribute of the form element, form_element is the value of the name attribute of the form's element.

There are other ways of accessing the forms as well as form's elements also using DOM API. But that is beyond the scope of this tutorial.

Previous: Javascript : Java object, JavaArray, JavaClass, JavaObject, JavaPackage, Packages, sun, netscape
Next: JavaScript: HTML Form - checking for non empty field



JavaScript: Tips of the Day

JavaScript: function and arguments

const person = {
  name: 'Lydia Hallie',
  hobbies: ['coding'],
};

function addHobby(hobby, hobbies = person.hobbies) {
  hobbies.push(hobby);
  return hobbies;
}

addHobby('running', []);
addHobby('dancing');
addHobby('baking', person.hobbies);

console.log(person.hobbies);

The addHobby function receives two arguments, hobby and hobbies with the default value of the hobbies array on the person object.
First, we invoke the addHobby function, and pass "running" as the value for hobby and an empty array as the value for hobbies. Since we pass an empty array as the value for y, "running" gets added to this empty array.
Then, we invoke the addHobby function, and pass "dancing" as the value for hobby. We didn't pass a value for hobbies, so it gets the default value, the hobbies property on the person object. We push the hobby dancing to the person.hobbies array.
Last, we invoke the addHobby function, and pass "bdaking" as the value for hobby, and the person.hobbies array as the value for hobbies. We push the hobby baking to the person.hobbies array.
After pushing dancing and baking, the value of person.hobbies is ["coding", "dancing", "baking"]

Ref: https://bit.ly/2Hcpkm6