Web Forms API

Sunil Sharma
Last Updated: May 13, 2022

Introduction

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.

 

 

Methods


checkValidity()

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.

 

reportValidity() 

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.

 

setCustomValidity(message)

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

 

Example

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

passwordInput.addEventListener('password', () => {
  passwordInput.setCustomValidity('');
  passwordInput.checkValidity();
});

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

 

Example

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

 

 

Validity Properties

rangeOverflow
 

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

 

 

rangeUnderflow
 

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

 

patternMismatch

 

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

 

 

stepMismatch
 

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

 

 

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!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think