Hello everyone, could you help me in this log in system I have log in system but it's not complete Q1) I need Form Valid

Post by **answerhappygod** » Sat May 14, 2022 6:32 pm

Hello everyone,
could you help me in this log in system I have log in
system but it's not complete
Q1) I need Form Validation javascript to check (name,
email, password and conform pasword )
note: please use rules checking like:
(!/[a-z]/.test(field) ||
![A-Z]/.test(field))
---------------------------------------
here is my sing up html code :
<!DOCTYPE html>
<html>
<head>
<title>Log in</title>
<meta name="description"
content="This is the description">
<link rel="stylesheet" href="2.css"
/>
<script src="store.js"
async></script>
</head>
<body>
<header
class="main-header">
<nav class="nav
main-nav">

<ul>

<li><a
href="index.php">HOME</a></li>

<li><a
href="store.php">STORE</a></li>

<li><a href="log-in.php">Log
in</a></li>

</ul>
</nav>
<h1 class="band-name
band-name-large">Playstation Cards</h1>
</header>
<section class="content-section
container">
<div
id="error"></div>

<div class="signup-box">
<h1>Sign Up</h1>
<form id="form" action="log-in.php" method="post"
onsubmit="return validate(this)">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text"
maxlength="32" required>
</div>
<div>
<label for="email">Email</label>
<input id="email" name="name" type="text"
maxlength="64" required>
</div>
<div>
<label
for="password">Password</label>
<input id="password" name="password"
type="password" maxlength="64" required>
<div>
<label for="password">Confirm
password</label>
<input id="password" name="password"
type="password" maxlength="64" required>
</div>

<button onclick="showAlert()" class="btn3"
type="submit">Submit</button><a>
</form>
<p class="para-2">
Already have an account? <a
href="log-in.php">Login here</a>
</p>
</div>
</body>
</html>
-----------------------------------
here is my log in html code
<!DOCTYPE html>
<html>
<head>
<title>Log
in</title>
<meta name="description"
content="This is the description">
<link rel="stylesheet"
href="styles.css" />
<script src="store.js"
async></script>
</head>
<body>
<header
class="main-header">
<nav class="nav
main-nav">
<ul>
<li><a
href="index.php">HOME</a></li>
<li><a
href="store.php">STORE</a></li>
<li><a href="log-in.php">Log
in</a></li>
</ul>
</nav>
<h1
class="band-name band-name-large">Playstation
Cards</h1>
</header>
<section class="content-section
container">
<div
id="error"></div>
<div class="login-box">
<h1>Login</h1>
<form id="form" action="/"
method="post">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text"
required>
</div>
<div>
<label
for="password">Password</label>
<input id="password" name="password"
type="password">
</div>
<button class="btn3"
type="submit">Submit</button>
</form>
<p class="para-2">
Not have
an account? <a href="sing-up.php">Sign Up Here</a>
</p>
</body>
</html>
------------------------------------
css code :
.signup-box {
width: 360px;
height: 520px;
margin: auto;
background-color: white;
border-radius: 3px;
}
.login-box {
width: 360px;
height: 280px;
margin: auto;
border-radius: 3px;
background-color: white;
}
h1 {
text-align: center;
padding-top: 15px;
color: blue;
}
.color-text{
color: blue;
font-weight: bold;
}
form {
width: 300px;
margin-left: 20px;
}
form label {
display: flex;
margin-top: 20px;
font-size: 18px;
}
form input {
width: 100%;
padding: 7px;
border: none;
border: 2px solid gray;
border-radius: 6px;
outline: none;
}
.btn3 {
width: 320px;
height: 35px;
margin-top: 20px;
border: none;
background-color: cyan;
color: black;
font-size: 18px;
}
p {
text-align: center;
padding-top: 1px;
font-size: 40px;
}
.para-2 {
text-align: center;
color: blue;
font-size: 15px;
margin-top: 20px;
}
.para-2 a {
color: black;
}