Design a login form using HTML & JavaScript with following validations usingRegular Expression on username and password fields.1. Username and Password should not be both blank2. Username should not start with digit,_, @ or #3. Password length must be 8 to 16 characters
Question
Design a login form using HTML & JavaScript with following validations usingRegular Expression on username and password fields.1. Username and Password should not be both blank2. Username should not start with digit,_, @ or #3. Password length must be 8 to 16 characters
Solution
Sure, here is a simple example of a login form using HTML and JavaScript with the specified validations:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Submit">
</form>
<p id="error"></p>
</body>
</html>
JavaScript:
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var error = document.getElementById('error');
// Check if username and password are not blank
if (username === '' || password === '') {
error.textContent = 'Username and Password should not be blank.';
return;
}
// Check if username starts with digit, _, @ or #
if (/^[0-9_@#]/.test(username)) {
error.textContent = 'Username should not start with digit, _, @ or #.';
return;
}
// Check if password length is between 8 and 16 characters
if (password.length < 8 || password.length > 16) {
error.textContent = 'Password length must be 8 to 16 characters.';
return;
}
// If all validations pass, clear the error message
error.textContent = '';
alert('Login successful!');
});
This code creates a simple form with username and password fields. When the form is submitted, it checks the following:
- If either the username or password is blank, it displays an error message.
- If the username starts with a digit, _, @, or #, it displays an error message.
- If the password is not between 8 and 16 characters, it displays an error message.
If all these checks pass, it clears the error message and displays a success message.
Similar Questions
Design a login form using HTML & JavaScript with following validations usingRegular Expression on username and password fields.1. Username and Password should not be both blank2. Username should not start with digit,_, @ or #3. Password length must be 8 to 16 characters
Make use of suitable interface elements to design a web form that requires a user to enter andsubmit the following information to create a new profile:• First name• Last name• Date of birth• Email• Phone number• Address• City• Postal code• Country• Credit card number• Credit card security code (CVV)• Credit card expiry dateYour design should consider the user interface design and form design techniques discussed inlectures. Create a prototype sketch of your form’s design in your answer book.(13 Marks)
What is HTML form tag? Discuss the different form attributes and design a simpleform to register student including name, roll no., semester, email, mobile number,gender, hobbies, and feedback, and also create two buttons submit and reset
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form</title></head><body> <h2>User Registration</h2> <p>Please complete the following form to register with our site:</p> <form action="" method="get"> <label for="user-name">User Name:</label> <input type="text" id="user-name"><br> <label for="password">Password:</label> <input type="password" id="password"><br> <label for="comfirm-password">Comfirm Password:</label> <input type="password" id="comfirm-password"><br><br> <label for="gender">Gender:</label><br> <input type="radio" name="gender" id="male"> <label for="male">Male</label><br> <input type="radio" name="gender" id="female"> <label for="female">Female</label><br> <input type="submit" name="button" id="button" value="Register Now"> </form></body></html>
In this following HTML code, which HTTP verb will be used when you will submit this form?<FORM action="/login.php" method="post"> <INPUT type="email" name="email" placeholder="Email" required/> <INPUT type="password" name="password" placeholder="Password" required/> <INPUT type="submit" name="submit" value="Login" /><FORM>
Upgrade your grade with Knowee
Get personalized homework help. Review tough concepts in more detail, or go deeper into your topic by exploring other relevant questions.