Form Validation using HTML and JavaScript

profilemsingh51
Home>Homework Answsers>Computer Science homework help>Java homework help
htmlJavascript

Overview

This Week 9 assignment introduces you to form validation using HTML tag attributes and JavaScript.

The focus this week is on adding validation to the web form you created in Week 07. You will use HTML5 validation attributes along with JavaScript to check form input and provide feedback to the user.

Preparation

  • On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_9. Copy your files from the Week 07 assignment (including images, the CSS file, and your form page). Open this folder in Visual Studio Code.
  • Create a new JavaScript file named validation.js and link it to your contact page using a <script> tag placed before the closing </body> tag.
  • Using the AI chatbot of your choice, investigate the use of the following HTML tag attributes for form inputs: required, minlength, maxlength, and pattern.

HTML5 Validation Attributes

  1. Add appropriate HTML5 validation attributes to your form fields:
    • required – Add this attribute to at least 3 fields that must be completed before submission.
    • minlength and maxlength – Use either or both of these attributes on at least 1 text input field to enforce minimum and maximum character limits where appropriate.
    • pattern – Use a regular expression pattern on at least 1 input field to validate specific formats (e.g., phone numbers, zip codes, or other formatted data relevant to your form).
  2. Consider using appropriate type attributes (such as email, tel, url, or number) to leverage built-in browser validation where applicable.
  3. Add appropriate elements such as <div> or <span> to display error messages for the user. Consider creating a dedicated area on the page for validation messages or displaying messages near the relevant form fields.

JavaScript Validation

  1. Consult your preferred AI to research how the JavaScript preventDefault() function is used to block the default form submission behavior and carry out validation using the checkValidity() and setCustomValidity() functions.
  2. In your validation.js file, write JavaScript code following these steps:
    1. Get a reference to the form element. Use document.getElementById() to select your form by its id ("webForm") and store it in a variable.
    2. Get references to your form input elements. Use document.getElementById() to select each input field you want to validate and store each in its own variable.
    3. Get references to your message display elements. Use document.getElementById() to select the <div> or <span> elements you created to display error and success messages.
    4. Create a validation function. Write a function (e.g., function validateForm(event)) that will contain all your validation logic. The event parameter will be used to prevent form submission.
    5. Prevent default form submission. At the beginning of your validation function, call event.preventDefault() to stop the form from submitting so your validation code can run first.
    6. Create a variable to track overall validity. Initialize a boolean variable (e.g., let isValid = true) that you will set to false if any field fails validation.
  3. Clear previous error messages. Before checking validity, clear any existing error messages by setting the textContent or innerHTML of your message elements to an empty string.
  4. Check each field's validity. For each input field, use the checkValidity() method to test if the field passes its HTML5 validation constraints. This method returns true if valid or false if invalid.
  5. Display specific error messages. Use if statements to check each field. When a field fails validation, display an appropriate error message in the corresponding message element and set your isValid variable to false.
  6. Display overall result. After checking all fields, use an if/else statement to check your isValid variable. If true, display a success message (e.g., "Form submitted successfully!"). If false, display an overall error message (e.g., "Please correct the errors above.").
  7. Attach the event listener. Outside your function, use addEventListener() to connect your validation function to the form's "submit" event. For example: form.addEventListener("submit", validateForm).
  8. Use CSS to style your validation messages appropriately (e.g., error messages in red, success messages in green).

Testing Your Work

  1. Test your form validation thoroughly:
    • Submit the form with empty required fields.
    • Enter data that violates minlength/maxlength constraints.
    • Enter data that does not match required patterns.
    • Submit a completely valid form and verify the success message appears.
  2. Check your updated contact page in 2 browsers. In a Word document, state which browsers you tested the pages in.
  3. As with previous assignments, feel free to use your favorite AI (in chat mode) to help resolve issues in the code. Just remember that the code needs to be yours, not the AI's.

Validation

  1. Go to the Nu HTML Checker tool at validator.nu to verify the HTML for the revised contact page. When the page passes, get a screenshot of the successful validation and put it in the Word document.
  2. Validate the updated CSS file using the service at CSS Validation Service. When the CSS passes the check, get a screenshot of the successful validation and put it in the Word document.

Submission Requirements

Add the Word document to the folder containing the complete set of .html files, the .css file, the .js file, and the image files used for your site.

  • Compress the folder and submit the zip file as an attachment to your submission.

Competencies Measured

By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:

  • Competency 1: Author well-structured, standards-compliant HTML.
    • Add HTML5 validation attributes.
  • Competency 5: Create interactive web page behaviors using JavaScript.
    • Implement JavaScript validation code in an external JavaScript file to validate form input as specified.
    • Set up the event handling for the submit button so that the validation process is triggered.
    • Display appropriate messages to the user about the validity of the inputs and the overall form.
    • Test the page in 2 browsers to confirm that the code works correctly.
    • 5 days ago
    • 5
    Report issue