Code360 powered by Coding Ninjas X Code360 powered by Coding Ninjas X
Table of contents
What is Web Forms API
Constraint Validation DOM Properties
Validity Properties
Frequently Asked Question
Key Takeaways
Last Updated: Mar 27, 2024

Web Forms API

Author Sunil Sharma
0 upvote


API is short for Application Programming Interface. There are different types of API's web API, server API, browser API. In layman terms, API allows two separate applications to talk to each other and share data between them. Using API, you do not have to know how API is implemented; you only have to use the API to send or receive data. API is an excellent example of abstraction. In this blog, we will discuss what Web Forms API is and see how they are helpful.


What is Web Forms API

What do you mean by web forms API? Web Forms API deals with the form data and check specific properties of the data to decide whether this data is good to send to the server or to use for other purposes or not.

We have different methods and different properties to check validation. Let's take a look at some of them.





This method checks the value of the element with the constraints set by the user or developer. If the value does not lie in the constraint domain, it fires an invalid event and returns false; otherwise, it returns true.



This method checks the value of the element with the constraints set by the user or developer. Suppose the value does not lie in the constraint domain. In that case, it fires an invalid event, returns false, and then reports its validity status to the user. Otherwise, it returns true.



This method sets a custom error message string shown to the user upon submitting the form, explaining why this value is not valid.  



const passwordInput = document.querySelector('password');

passwordInput.addEventListener('password', () => {

passwordInput.addEventListener('invalid', () => {
  if(passwordInput.value === '') {
    passwordInput.setCustomValidity('Enter your password!');
  } else {
    passwordInput.setCustomValidity('Password can only contain upper and lowercase letters. Try again!');

Constraint Validation DOM Properties



<div id="one"></div>
<input type="text" id="two" />
<input type="text" id="three" disabled />
    document.getElementById('one').willValidate; //undefined
    document.getElementById('two').willValidate; //true
    document.getElementById('three').willValidate; //false



Validity Properties


<input id="first" type="number" max="50" value="40" />
<input id="second" type="number" max="50" value="100" />
    document.getElementById('first').validity.rangeOverflow; //false
    document.getElementById('second').validity.rangeOverflow; //true




<input id="first" type="number" min="50" value="100" />
<input id="second" type="number" min="50" value="40" />
    document.getElementById('first').validity.rangeUnderflow; //false
    document.getElementById('second').validity.rangeUnderflow; //true




<input id="first" pattern="[0-9]{4}" value="1234" />
<input id="second" pattern="[0-9]{4}" value="ABCD" />
    document.getElementById('first').validity.patternMismatch; //false
    document.getElementById('second').validity.patternMismatch; //true




<input id="first" type="number" step="2" value="4" />
<input id="second" type="number" step="2" value="3" />
    document.getElementById('first').validity.stepMismatch; //false
    document.getElementById('second').validity.stepMismatch; //true



Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job

Frequently Asked Question

Write the protocol that web API supports.

Answer - Web API supports HTTP protocol.


Web API uses which library for JSON serialization?

Answer-  Web API uses the Json.NET library for JSON serialization.


What do you mean by CORS?

Answer- CORS is short for Cross-Origin Resource Sharing. This mechanism allows requests from one website to another website not permitted by SOP(Same Origin Policy).


What is the full form of HTTP?  

Answer- Hypertext Transfer Protocol.


What do you mean by TestApi? 

Answer- This library helps developers create testing tools and automated tests for a .NET application using different data structures and algorithms.


Key Takeaways


So let’s brief everything that we have learned in this blog.

We got to know that API is a communicating medium between two applications. We learned about different types of API.

After that, we discussed how you could validate your Web Form using different methods and properties of API defined in javascript.


For more information about javascript, You can also expand your knowledge by referring to these articles on javascript.

Also, if you are preparing for interviews, visit this JavaScript interview question blog.

Happy Reading!


Live masterclass