Teach with us

HTML novalidate Attribute

The HTML novalidate attribute define that while submitting the form the form data should not be validated in an HTML document.

Syntax

Following is the syntax −

<form novalidate></form>

Let us see an example of HTML novalidate Attribute −

Example

 Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
   }
   input[type='text'] {
      width: 300px;
      padding: 8px 16px;
      border: 2px solid #fff;
      background: transparent;
      border-radius: 20px;
      display: block;
      margin: 1rem auto;
      outline: none;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   ::placeholder {
      color: #000;
   }
</style>
<body>
<h1>HTML novalidate attribute Demo</h1>
<form>
<input type="text" placeholder="Enter your name" required>
<input type="submit" value="Submit" class="btn" onclick='check()'>
</form>
<button type='button' class="btn" onclick="set()">Set No Validation</button>
<div class="show"></div>
<script>
   function set() {
      document.querySelector('form').setAttribute('novalidate', 'true');
   }
</script>
</body>
</html>

Output

Try to click on “Submit” button without entering any name in the text field, it will produce a warning message −

Now click on “Set No Validation” button to set novalidate attribute on the form element and now try to submit the form without entering any name in the text field, this time it will easily get submitted without showing any warning message 

−

Updated on 26-Sep-2019 11:16:25

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements