Scribd
Upload
23 views3 pages

Homework 2

The document provides instructions for a homework assignment to add form validation to an existing web page using jQuery. Students are asked to modify a validate.js file to validate a username, password, and email using specific rules. They also must modify the web page to only enable a submit button when all fields are valid.

Uploaded by

batoolnf11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views3 pages

Homework 2

The document provides instructions for a homework assignment to add form validation to an existing web page using jQuery. Students are asked to modify a validate.js file to validate a username, password, and email using specific rules. They also must modify the web page to only enable a submit button when all fields are valid.

Uploaded by

batoolnf11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

KING SAUD UNIVERSITY

COLLEGE OF COMPUTER AND INFORMATION SCIENCES


DEPARTMENT OF SOFTWARE ENGINEERING

Course Code / Title: SWE-381/ Web Instructor: Sarah Alkoblan


Applications Development
Homework 2 Date: April, 2024
Semester / Year: Semester II/2024

Due Date: April 16th, 2024 before 11:59 pm.

INSTRUCTION:

 Please submit your solution on Blackboard (No solutions would be accepted by


email).
 The solution should be in a zip file which contains both word and source file.
 In the word file, please provide a title page with all the necessary information
(including the name and student number).

STUDENT IDENTIFICATION:
Name: ………………………………….. ID: …………………… Signature: …………………………

Homework 2
(jQuery)

This assignment is designed to check your understanding of jQuery syntax and programming structures.
Make sure to read the related chapters covered. You also need to go over the in-labs we did in class
before attempting this assignment.

You may also need the following jQuery material:

- read the text value of a text input in a form having the id="username"
var inputValue = $("#username").val();
//equivalent to the javascript instruction
var inputValue = document.getElementById("username").value;

- read the text value of an HTML element having the id="test"


var elementText = $("#username").text();
//equivalent to the javascript instruction
var elementText = document.getElementById("test").innerHTML;

The same functions val() and text() could be used to set a text into an input field in a form or in an HTML
element respectively. Example: $("#username").val("Mohammed"); //allows to write the string
Mohammed in the text input field of a given form.

To write a function called addTwoIntegers you do the following:

var addTwoIntegers = function(param1,param2){


return (param1+param2);
}

You can then call your function like this: var result = addTwoIntegers(5,6); // which returns 11

A function can take a callback function as parameter. For example:

var myFunction = function (parm, callbackFunction){


if (callbackFunction(param))
alert(param+" is greater than 10");
else
alert(param+" is smaller than 10");
}

When you call myFunction you should give the right name of the function that will be the callback
function. Example:

…..
myFunction(15, testIfGreaterThanTen); // which will display “15 is greater than 10”
…..
var testIfGreaterThanTen = function(param){
return(param>10);
}

To write a text after an HTML element (on the same line) you have to use the jQuery after()
function. Example:

$("#username").after("<span id=’text’>This is the username textfield</span>"); // displays the


text “This is the username textfield” after the username textfield on the same line.

To remove the previous added text just call: $("#text").remove();


Question

Please use HTML and jQuery only to add interactivity to webpage given in this homework
named “hw2.html”. Form validation is an important process to ensure that all data entered by
the user provided for each required field. Using jQuery, modify the given website to allow it to
notify the user when the input is incorrect.

You are asked to do the following:

 Modify js/validate.js to add the validation functionality.


o Username cannot have numbers only.
o Password must be at least 8 characters and must contain at least one special
character.
o Emails are in correct formats: [email protected]
 Modify “hw2.html” to add a button submit which will be enabled only if all the fields
are filled with valid information.

Inside the file “validate.js”, you will find two functions: validateField which should take in three
parameters: fieldElem, infoMessage, and validateFn. fieldElem can be a CSS selector, jQuery
element, or DOM element that represents a single form text field. infoMessage should be a
string that gives a human-readable description of the field’s requirements. validateFn should be
a function that validates the field’s value.

The function validateField should be called when the user focuses on one of the three form’s
input fields. The infoMessage should be displayed after (on the same line) the input field the
user is focusing on. The infoMessage should inform the user about the rules to be respected for
the current input field. When he focuses on another input field the infoMessage of the previous
input field disappears and the infoMessage of the current input field appears.

The callback valideFn should be replaced by one of the three functions validateUsername,
validatePassword and validateEmail when the validateField is called.

If the three input fields are well filled in by the user, the submit button becomes enabled.

You might also like