how to show form validation error message in html and JavaScript form |HTML and JavaScript validation from.

Deal Score+2
Deal Score+2

What we will cover in this article.

1:write a program of form validation by using html and javascript.
2:validation in javascript for registration form.
3:how to display error message in html form bootstrap.
4;javascript form validation with error message.
5:javascript form validation with all error messages at once.
6:how to display error message in javascript with alert.
7:javascript form validation example.
8:html form validation using javascript.

in this article I’m going to show  how to display error message using html and JavaScript. Error

message very important in every application. Because its tell user how to show error message

submit form.

step 1:

first of all create index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

So we have created template of html file and next step will be add form in file.

Step 2:

<form id="form" action="/" method="GET"></form>

what is html Form (<form></form>).

html Form is tag its used to take user inputs. If we want to add inputs in form we must need to add inputs in form to get user input.

Why we use action=”/” in html.

Action are to get form input and asign to JavaScript variables. Simple mean getting user inputs form submition.

why we use Method in html form (method=”get or post”).

there are two meanings of using method in form.one get data form example if user requests for getting any page then.we will use GET method . if we are submitting user input form then we will use POST method.

Step 3:

the next step we have to create input fields for user input values.

<div>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required>
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
  </div>

 

Why we use input in html (<input>).

input are used to get user  values from form.

Now our HTML form is completed. The next step we have to write validation using JavaScript. First of we need to get user values from form.

const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')

we have get user name and form value. we also get form by id=”form” as we use and html form.

The next step to add validation of user input. We need to add some JavaScript code for that.

form.addEventListener('submit', (e) => {
     let messages = []
  if (name.value === '' || name.value == null) {
    messages.push('Name is required')
  }

  if (password.value.length <= 6) {
    messages.push('Password must be longer than 6 characters')
  }

  if (password.value.length >= 20) {
    messages.push('Password must be less than 20 characters')
  }

  if (password.value === 'password') {
    messages.push('Password cannot be password')
  }

  if (messages.length > 0) {
    e.preventDefault()
    errorElement.innerText = messages.join(', ')
  }

first of all we connect form with addEventListener using form id. the next step we created an array for storing error message.then we check if user input  null or empty.then show error message.then we check password length using javascript length() property.if length is less than six then show error message.

This is all code of article hope you understand.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="error" style="color:red"></div>
<form id="form" action="/" method="GET">
  <div>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required>
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
  </div>
  <button type="submit">Submit</button>
</form>
 
      
 <script>
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
form.addEventListener('submit', (e) => {
     let messages = []
  if (name.value === '' || name.value == null) {
    messages.push('Name is required')
  }

  if (password.value.length <= 6) {
    messages.push('Password must be longer than 6 characters')
  }

  if (password.value.length >= 20) {
    messages.push('Password must be less than 20 characters')
  }

  if (password.value === 'password') {
    messages.push('Password cannot be password')
  }

  if (messages.length > 0) {
    e.preventDefault()
    errorElement.innerText = messages.join(', ')
  }
})

</script>

</body>
</html>



 

We will be happy to hear your thoughts

Leave a reply

Logo
Enable registration in settings - general