Question

In: Computer Science

Here, I detail the validation rules that you should implement and the error messages that must...

Here, I detail the validation rules that you should implement and the error messages that must be shown for invalid inputs: For login page:

username input is required. If it is empty, show error message of “Please enter your username.”

username input should be at least 5 character. If it is less that 5 character, show error message that “Please enter at least 5 characters.”

password input is required. If it is empty, show error message of “Please enter your password.”

Use a jQuery library for form validation to do so.

The HTML code I have is:

<!DOCTYPE html>

<html>
<head>
<title>Login Form</title>
<meta charset="utf-8">
   <script src="loginform.js"></script>
</head>

<style>
.header {
text-align: center;
font-size: 36px;
background-color: #b1d1d1;
}

input[type=text], select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type="password"],select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button[type=login] {
width: 45%;
background-color: #039be5;
color: white;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}

input[type=login]:hover {
opacity: 0.5;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>

<body>
<div class="header">
Login Form
</div>

<div class= "FormInfo">
<form action="/action_page.php">
<strong><br>
<label for="username">Username</label><br>
<input type="text" id="username" name="username" placeholder="Enter your Username"><br>

<label for="password">Password</label><br>
<input type="password" id="password" name="password" placeholder="Enter your Password" width: 100%>
<br>

<button type="login" onclick="check(this.form)" value="login">Login</button>

<label><input id="rememberme" name="rememberme" value="remember" type="checkbox" input checked/> &nbsp;Remember me</label>
</form>
</div>


</body>
</html>

Solutions

Expert Solution

logiinform.js

function check(form)
{
   var uid = form.username;
   var passid = form.password;
   if(userid_validation(uid,5))
   {
       if(passid_validation(passid))
       {
           return true;  
       }
      
   }
   return false;
}

function userid_validation(uid,mx)
{
var uid_len = uid.value.length;
if (uid_len == 0 )
{
alert("Please enter your username");
uid.focus();
return false;
}
if ( uid_len < mx)
{
alert("Please enter at least 5 characters.");
uid.focus();
return false;
}

return true;
}
function passid_validation(passid)
{
   var uid_len = passid.value.length;
   if (uid_len == 0 )
   {      
       alert("Please enter your password.");
       passid.focus();
       return false;
   }


return true;
}

___________________________________________________________________________________________

login.html

<!DOCTYPE html>

<html>
<head>
<title>Login Form</title>
<meta charset="utf-8">
<script src="loginform.js"></script>
</head>

<style>
.header {
text-align: center;
font-size: 36px;
background-color: #b1d1d1;
}

input[type=text], select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type="password"],select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button[type=login] {
width: 45%;
background-color: #039be5;
color: white;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}

input[type=login]:hover {
opacity: 0.5;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>

<body>
<div class="header">
Login Form
</div>

<div class= "FormInfo">
<form action="/action_page.php">
<strong><br>
<label for="username">Username</label><br>
<input type="text" id="username" name="username" placeholder="Enter your Username"><br>

<label for="password">Password</label><br>
<input type="password" id="password" name="password" placeholder="Enter your Password" width: 100%>
<br>

<button type="login" onclick="return check(this.form)" value="login">Login</button>

<label><input id="rememberme" name="rememberme" value="remember" type="checkbox" input checked/> &nbsp;Remember me</label>
</form>
</div>


</body>
</html>

Note: need to change onclick="check(this.form)" to onclick="return check(this.form)"

____________________________________________OUTPUT________________________________________

venereology answered 1 year ago
Next > < Previous

Related Solutions

how do you compute the test error in 5-fold cross-validation?
how do you compute the test error in 5-fold cross-validation?
Exercise. Practice redirection to change the above commands so that: (i) error messages are sent to...
Exercise. Practice redirection to change the above commands so that: (i) error messages are sent to /dev/null, but (ii) we still detect errors and halt execution of the sequence appropriately. For i, recall from prior labs that standard error stream (stderr) is #2, and you will need redirection to route an error normally to stderr to /dev/null. Hint: Recall that redirection happens per process executed. So, what do you need to add to each process to make the redirection successful?...
Lesson is about Input validation, throwing exceptions, overriding toString Here is what I am supposed to...
Lesson is about Input validation, throwing exceptions, overriding toString Here is what I am supposed to do in the JAVA Language: Model your code from the Time Class Case Study in Chapter 8 of Java How to Program, Late Objects (11th Edition) by Dietel (except the displayTime method and the toUniversalString method). Use a default constructor. The set method will validate that the hourly employee’s rate of pay is not less than $15.00/hour and not greater than $30.00 and validate...
What are the rules for net ionic equations? I know you must follow the solubility chart,...
What are the rules for net ionic equations? I know you must follow the solubility chart, but I'm confused about the other aspects. When the compound is solid, gas or liquid, I don't break apart the compound right? Unless the compound is a strong acid and base? I already know the steps of finding the net ionic equation. I'm just not sure about the rules. So if you could provide an example for the different reactions, can you also include...
Here is what I require you to do. 1. you must find 1 article(they can be...
Here is what I require you to do. 1. you must find 1 article(they can be from regular newspaper, magazine, internet, or trade publication) 2. You must  a. write a summary of what you have read b. relate what you have read to what we have discussed in this unit- make sure to IDENTIFY THE ECONOMIC CONCEPT c. give me your opinion about what you have read   3.submission must be typed as a word document file  and must be...
You will implement the MyList ADT according to the following: 1. MyList must implement the List...
You will implement the MyList ADT according to the following: 1. MyList must implement the List interface. It will look something like below: public class MyList<E> implements List<E> { ... } Note: As said in the class, when implementing an interface, you have to implement each method in it. There are a lot of methods in the List interface. We are going to address this issue below. 2. The initial capacity of MyList must be 2. This is not an...
Each part should be no more than 1 page in length. Part I The rules of...
Each part should be no more than 1 page in length. Part I The rules of accounting provide management with “some” latitude in determining when revenue is earned. Assume that a company normally required acceptance by its customers prior to recording revenue as earned, delivers a product to a customer near the end of the quarter. The company believes that customer acceptance is assured, but cannot obtain it prior to the quarter-end. Recording the revenue would assure “making its numbers”...
B) How many voters should I survey to ensure a 3% margin of error with a...
B) How many voters should I survey to ensure a 3% margin of error with a confidence level at 95%? C)  The senator claims that employment numbers have made gains by 8 points. You checked 20 agencies and found a mean rise of 7.8 points with st.dev. of 2.3 points. Use a 90% Confidence Interval to determine if you believe the senator's claim. D) We collected the following data from graduates from SPC. The values are starting salaries of the first...
B) How many voters should I survey to ensure a 3% margin of error with a...
B) How many voters should I survey to ensure a 3% margin of error with a confidence level at 95%? C)  The senator claims that employment numbers have made gains by 8 points. You checked 20 agencies and found a mean rise of 7.8 points with st.dev. of 2.3 points. Use a 90% Confidence Interval to determine if you believe the senator's claim. D) We collected the following data from graduates from SPC. The values are starting salaries of the first...
why must oxygen saturation be kept in homeostatic range I need a detail answer
why must oxygen saturation be kept in homeostatic range I need a detail answer
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT