Question

In: Computer Science

Can anyone add a validation function to my html? First, ensure that your form uses at...

Can anyone add a validation function to my html? First, ensure that your form uses at least three of the following field types: check boxes, text boxes, option buttons, selection lists, and text areas. Then, program validation for your form ensuring that users enter values or make selections in all fields, and verifying at least one other aspect of at least one of the fields. Provide appropriate feedback to users when the form fails validation. Test your completed program until all validation works reliably with different combinations of valid and erroneous data. Be sure to include comments within each line of code to explain what each line of code is accomplishing.

<------------------------------------------------------------------------------------------------------->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Case Project</title>
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Lamborghini</h1>
<p><a href='index.html'>Lamborghini</a> <a href='ferrari.html'>Ferrari</a> <a href='bugatti.html'>Bugatti</a> <a href='rollsroyce.html'>Rolls-Royce</a></p>
<hr>
<p><img src='https://vignette.wikia.nocookie.net/pawnstarsthegame/images/6/6e/2003_Lamborghini_Murcielago.png'>The Aventador has been created to anticipate the future, as demonstrated by the use of innovative technology, including a V12 engine and the extensive use of carbon fiber. The authentic design masterpieces together stark dynamism with aggression to produce a cutting edge carbon fiber monocoque. The interior of the Aventador combines high-level technology and luxury equipment with premium-quality materials, skilfully crafted with the expertise characteristic of the finest Italian traditions. A supercar family that has already become a legend in its own right. Discover technical specifications, dimensions, performance, and the detailed features of all the new Lamborghini Aventador models.</p>
  

</script>
</body>
</html>

Solutions

Expert Solution

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Case Project</title>
<link href="layout.css" rel="stylesheet" type="text/css">

<script>
// 
//  Validation starts -->
function formValidation()
{
//
//  calling all the Validation functions -->

// defining variables for all the Form Fields
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex; if(userid_validation(uid,5,12))
// calling validation functions, one by one
// these functions will return true if the data input by user is valid else false for any invalid input
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{ 
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
} 
}
} 
}
}
}
}
return false;
}
// Defining all the Validation functions
// UserId Validation function -->

function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
// checking if length of userID is according to the length given 
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}

// PassWord Validation function -->
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
// checking if length of passID is according to the length given 

if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}

// UserName Validation function
function allLetter(uname)
{ 
var letters = /^[A-Za-z]+$/;  //this is called a regular expression 
if(uname.value.match(letters)) //".match()" checks if input name is all alphabets it will return true as name only has letters 
{
return true;
}
else
{
alert('Username must have alphabet characters only'); //else error
uname.focus();
return false;
}
}

// Address Validation function -->
function alphanumeric(uadd)
{ 
var letters = /^[0-9a-zA-Z]+$/;  //this is called a regular expression 
if(uadd.value.match(letters))  //".match()" checks if input address has only alphabets and numbers it will return true 
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}

// similarly in Validation functions below there is a regular expression and a ".match()" function,
//  .match() function checks if input data is according to regular expression or not.

// Selct Country Validation function -->
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}

// ZipCOdeValidation function -->
function allnumeric(uzip)
{ 
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}


// Email Validation function -->
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}

// Gender Validation function -->
} function validsex(umsex,ufsex)
{
x=0;

if(umsex.checked) 
{
x++;
} if(ufsex.checked)
{
x++; 
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Succesfully Submitted');
window.location.reload()
return true;
}
}
</script>
</head>
<body>

<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>


<h1>Lamborghini</h1>
<p><a href='index.html'>Lamborghini</a> <a href='ferrari.html'>Ferrari</a> <a href='bugatti.html'>Bugatti</a> <a href='rollsroyce.html'>Rolls-Royce</a></p>
<hr>
<p><img src='https://vignette.wikia.nocookie.net/pawnstarsthegame/images/6/6e/2003_Lamborghini_Murcielago.png'>The Aventador has been created to anticipate the future, as demonstrated by the use of innovative technology, including a V12 engine and the extensive use of carbon fiber. The authentic design masterpieces together stark dynamism with aggression to produce a cutting edge carbon fiber monocoque. The interior of the Aventador combines high-level technology and luxury equipment with premium-quality materials, skilfully crafted with the expertise characteristic of the finest Italian traditions. A supercar family that has already become a legend in its own right. Discover technical specifications, dimensions, performance, and the detailed features of all the new Lamborghini Aventador models.</p>
  
</body>
</html>

CSS code for FORM:

h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {
float: left;
margin-bottom: 10px;
}

form textarea {
float: left;
width: 350px;
height: 150px;
}

[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}

p {
margin-left: 70px;
font-weight: bold;
}

venereology answered 7 months ago
Next > < Previous

Related Solutions

Can anyone add a validation function to my html? First, ensure that your form uses at...
Can anyone add a validation function to my html? First, ensure that your form uses at least three of the following field types: check boxes, text boxes, option buttons, selection lists, and text areas. Then, program validation for your form ensuring that users enter values or make selections in all fields, and verifying at least one other aspect of at least one of the fields. Provide appropriate feedback to users when the form fails validation. Test your completed program until...
Create a form using the following HTML elements at a minimum. Style the form in your...
Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...
I used this code for my first draft assignment. My teacher told me not to add...
I used this code for my first draft assignment. My teacher told me not to add a decrypt function. I have the variable encryptionKey holding 16. I can simply negate encryptionKey with the - in front. Then I make one key change and all the code still works properly. How do I adjust this code? import csv import sys #The password list - We start with it populated for testing purposes passwords = [["yahoo","XqffoZeo"],["google","CoIushujSetu"]] #The password file name to store...
can anyone summarize for me the below passage and to add for me some information that...
can anyone summarize for me the below passage and to add for me some information that u get from the below passage Thank You Theory of Reasoned Action stresses the importance of attitudes and intentions in changing a behavior. According to this theory, the most important determinant of behavior is intention.23 Very few actions that produce a healthy outcome happen without ample knowledge and full intention to practice the healthy behavior. Two cognitive processes are at work to develop healthy...
Can anyone explain the complete mechanism of a nitrile with a grignard reagent to form a...
Can anyone explain the complete mechanism of a nitrile with a grignard reagent to form a ketone?
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {    dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')       message = "<ul><li>NAME:" + document.form1.name.value;    message += "<li>ADDRESS:" + document.form1.address.value;    message += "<li>PHONE:" + document.form1.phone.value;    message += "</ul>";    dispWin.document.write(message); } </script> </head> <body>    <h1>Form Display Example</h1>    <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>    <form name="form1" method="get" action="">   ...
Write an HTML file that create the following web page. my first nested list steps of...
Write an HTML file that create the following web page. my first nested list steps of backing a cake Important notes: You should have to copy and paste the “HTML script” as your answer for this question. DON’T take screen shot for your HTML script. It must be editable script. Take a screen shot for your output web page and paste it as a part of your answer.
What are creative ways that you can retain your first employee and ensure you are meeting...
What are creative ways that you can retain your first employee and ensure you are meeting his or her needs? Consider how you can meet or exceed the employee’s “psychological contract.” Also, how would you evaluate the new employee in terms of his or her ability to be a team player?
Free Form Styling ( HTML) Your goal this week is to translate ideas into action. The...
Free Form Styling ( HTML) Your goal this week is to translate ideas into action. The text below is just that, it has no formatting. You need to prepare it for a launch on a web page. It needs a header to identify it as an article about the status of 'Wheat Production in America" (it isn't really). It needs to be formatted for readability and it needs to have one image included that are related to the topic. One...
Free Form Styling ( HTML) Your goal this week is to translate ideas into action. The...
Free Form Styling ( HTML) Your goal this week is to translate ideas into action. The text below is just that, it has no formatting. You need to prepare it for a launch on a web page. It needs a header to identify it as an article about the status of 'Wheat Production in America" (it isn't really). It needs to be formatted for readability and it needs to have one image included that are related to the topic. One...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT