Essay Help Services

Week 7 Lab JavaScript and Transferring Data | Java

Home Recent Questions Week 7 Lab JavaScript and Transferring Data | Java

Task 1: Using JavaScript to check user entered data

While we can check input data using the HTML5 pattern attrbte, JavaScript enables us to do more complex data checking that involves more than one input field.

Step 1: Load an example HTML form.

1. Create a local folder called lab07, download the lab07.zip file and unzip the file to the folder. Open the file register.html in your editor.
2. We need to tell the web page register.html where to submit the information collected from the form when the form is submitted. We will submit with post to a testing page formtest.php.
3. Check that the form input has been correctly sent to the server by checking that the response from the server has a table with all the name-value pairs sent from the form control elements.
4. So we can check the JavaScript data validation is working we will turn off HTML5 data validation by adding the novalidate="novalidate" attribute to the form.
5. Following the steps in Lab 6, use the <script> element to create a link to a file called validate.js from register.html.
6. Validate the HTML.

Step 2: Create JavaScript template to check the data a user has entered into the form

In this step we will create a JavaScript program that registers a function to respond to submit events of the HTML form.

1. Following the template defined in Lab 6 (T1 step 3), create a JavaScript file called validate.js. Include an init function that responds to the browser window loading.
2. At the top of your JavaScript file, insert the directive "use strict"; to prevent any global variables being declared within functions.

Inside the init function write the following lines to get a reference to the HTML form and register a function called validate() to respond to onsubmit events of the HTML form.

var regForm = document.getElementById("regform");// get ref to the HTML element
regForm.onsubmit = validate;    //register the event listener

4. Just below the “use strict”; directive at the top of the file, create the shell of the validate() function as shown below. If this function returns false then the form data will not be submitted to the server

Step 3: Use regular expressions to check the format of text input strings


In this step we will use regular expressions within if-else statements to check the following rules:

• First name is not empty and contains only alpha characters.
• Last name is not empty and contains only alpha characters or a hyphen.
• The age is an integer greater than 18 but less than 10,000.

Regular expression patterns in JavaScript are the same as those we used in HTML5 but are objects defined between two forward slashes:

var myPattern = /regex pattern/;

We test strings against regex objects using the Regex.test(String) or the String.match(Regex) methods.

1. Within the validate() function you created in Step 2, after the section where you initialize the variables, write the following statements


Similar Posts

Search Here

Order Now

Latest Reviews

Facebook

Payments And Security