Html5 form validation

Developer
Rob
Size
2,090 Kb
Views
46,552
  1. Html5 form validation Previews
  2. Html5 form validation HTML Codes
  3. Html5 form validation CSS Codes
  4. Html5 form validation JS Codes

How do I make an html5 form validation?

Uses HTML5 form validation api without jquery. Tested in Chrome.. What is a html5 form validation? How do you make a html5 form validation? This script and codes were developed by Rob on 30 August 2022, Tuesday.

Html5 form validation Previews
IQ Test

Html5 form validation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>html5 form validation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form method="post" id="theform"> <label for="name"> Name <br/> <input type="text" name="name" required></input> <p class="errorText hidden">error</p> </label> <label for="phone">Phone<br/> <input type="tel" name="phone" pattern="\d{1,3}\s?\d{3,4}\s?\d{3,5}" required></input> <p class="errorText hidden">error</p> </label> <label for="email">email <br/> <input type="email" name="email" required></input> <p class="errorText hidden">error</p> </label> <button type="submit" id="submitform">submit</button> <div id="errors"></div>
</form> <script src="js/index.js"></script>
</body>
</html>

Html5 form validation - Script Codes CSS Codes

form { font-family: arial; font-size: 13px;
}
label { display: block;
}
input { display: inline-block; margin-bottom: 20px;
}
.errorText { color: red; display: inline-block; margin: 0;
}
.hidden { display: none;
}

Html5 form validation - Script Codes JS Codes

var button = document.getElementById('submitform');
button.addEventListener('click', function(event){ event.preventDefault(); validator.showErrors(this.parentNode.elements);
});
var validator = { showErrors: function(formFields) { for(var i = 0; i < formFields.length; i++) { if(!formFields[i].checkValidity()) { // this part might not work in other browsers formFields[i].nextSibling.nextSibling.classList.remove('hidden'); } else { formFields[i].nextSibling.nextSibling.classList.add('hidden'); } } }
};
Html5 form validation - Script Codes
Html5 form validation - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 2,090 Kb
Views 46,552
Do you need developer help for Html5 form validation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (rowinf) Script Codes
Name
Bootstrap test
A Pen by Rob
Flash Cards
Nav Menu with Chevron
Table filters
Get combo box item value
Jquery form
Responsive Calendar
Filter inputs
Site Layout
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!