CSC 317 Assignment 4

Introduction

For assignment four, you will be adding JavaScript to your forms. Use of bootstrap and jQuery is NOT ALLOWED. For this assignment we will focus on adding JS to add some functionality to our forms. We will also avoid using certain things in HTML and CSS and instead elect to implement them in JavaScript. The solutions you will write will be pure JavaScript. The purpose of this is to learn and get comfortable with JavaScript. The forms that will be adding JavaScript to are login.html, registration.html, and postimage.html. PLEASE NOTE, YOU ARE FORBIDDEN TO USE ANY JAVASCRIPT LIBRARY OR HTML5 Tag Attributes THAT DO INPUT VALIDATION UNLESS STATED OTHERWISE.

For you HTML forms to know what JavaScript code you will be calling, we need to link our JavaScript files to our HTML files. You may link your JavaScript files to your HTML pages by adding the following to the head tag of each HTML page:

< script type="text/javascript" src="path/to/file.js">< /script>

The type attribute will define the MIME type of the file which tells the browser this is a JavaScript file. The src attribute specifies the URL of an external script file.

If you need your JavaScript file to load AFTER the HTML is loaded, you may add the defer attribute to the HTML tag. This will cause the file to load after the html is parsed

Requirements

Students are required to add JavaScript to their forms per the specifications below:

ALL forms should be in < form> tags. If your form is built using < table> tags this needs to be removed.

Note that normally when using the form HTML attribute action and URL, data from the form is automatically grabbed and transmitted to the server. But since we do not have a server to work with, we can have it trigger a JavaScript function and grab the data manually as an exercise. We can do this with the onsubmit attribute for the form and leaving the action attribute empty.

FORM VALIDATION DONE VIA HTML5 IS NOT ALLOWED, LATER WE CAN ADD THEM IN TO SIMPLIFY THE VALIDATION.

Students are required to add JavaScript to their forms per the specifications below:

login.html

• require the user to enter a username that is 3 or more alphanumeric characters.
• require the user to enter a password that is 8 or more characters.
• Add an action to your form, when the form is submitted you can do the following:
  • Grab all needed input values from the input fields of the form.
  • Store these values into a JavaScript Object (basically key value pairs).
  • Convert this JS Object into JSON. ( JSON.stringify() )
  • Print the JSON using console.log

registration.html - for guests to register accounts

• require the user to enter a username that is 3 or more alphanumeric characters.
• require the user to enter a password that is 8 or more characters AND contains at least 1 upper case letter AND 1 number and 1 of the following special characters ( / * - ! @ # $ ^ & * ).
• require that the password and confirm password inputs are the same.
• require the user to enter an email that is valid.
  • This one CAN BE done with the type attribute set to "email"
• require the user to select that they are 13+ years of age.
  • This one CAN BE done with the HTML attribute require
• require the user to select TOS and Privacy rules.
  • This one CAN BE done with the HTML attribute require
• Add an action to your form that way, when the form is submitted you can do the following:
  • Grab all needed input values from the input fields of the form.
  • Store these values into a JavaScript Object (basically key value pairs).
  • Convert this JS Object into JSON. (JSON.stringify() )
  • Print the JSON using console.log

postimage.html - for registered users to post images

• require user to enter text for Post Title.
• require user to enter text for post description.
• Require the user to only upload images that are either jpg, png, bmp, gif
• require the user to accept Acceptable Use Policy for uploading images
  • This one CAN BE done with the HTML attribute require
• Add an action to your form that way, when the form is submitted you can do the following:
  • Grab all needed input values from the input fields of the form. Note for the file, the path to the file is OK.
  • Store these values into a JavaScript Object (basically key value pairs).
  • Convert this JS Object into JSON. (JSON.stringify() )
  • Print the JSON using console.log

When implementing the above requirements think about what happens when these requirements are not met. Some of these requirements can be verified as the user types, some can be verified when the user clicks the submit button. These design choices I leave up to you.