View Code? Open in Web Editor
NEW
Form validation with HTML and JavaScript
CSS 33.08%
HTML 53.07%
JavaScript 13.85%
chingmanlai_webexercise2's Introduction
JavaScrip LAB 1 Form validation
- Save this repository as zip
git clone https://github.com/ilkkamtk/BCW1.git
and extract it
Selecting and manipulating elements + events
- Open sample.html
- Following teacher instructions learn to select and manipulate elements and add events to elements
- Some help:
- Open task_a.html in editor
- Make a form with the following input fields
- Firstname
- Lastname
- Email
- Phone number
- Address
- Postal code
- Password
- Submit-button
- Validate the HTML at http://validator.w3.org. Make the changes validator suggests.
- Implement form validation by using HTML5
- Firstname and lastname are required
- Email has to be valid and it is required
- Phone number format needs be +358401234567
- Address and postal code are not required, but postal code needs to be exactly 5 numbers (if entered)
- Password is required
- Some help
- If you have time also make some CSS for the input fields (modify css/main.css)
- Open task_b.html in editor
- Copy/paste the form you made in task A
- Add novalidate attribute to the form element (disable HTML5 validation)
- Implement form validation by using JavaScript
- Validate the same properties as in task A
- Hints:
const element = document.querySelector()
const elements = document.querySelectorAll()
element.addEventListener('submit', functionName)
element.setAttribute('style', 'cssProperty: value')
elelment.cssProperty = value
- If the form is not valid, stop the submit event with
preventDefault()
- Some help
chingmanlai_webexercise2's People
Contributors
Watchers