Ex.

No :5

Aim:

The aim of this experiment is to validate the registration, user login, user profile, and payment by credit card pages
using JavaScript. By implementing validation, we can ensure that the input provided by users is correct and meets the
required criteria. This will enhance the user experience and prevent potential issues with data integrity.

Algorithm:

Registration Page Validation:

1. Validate that all required fields are filled in before submitting the form.

2. Check the validity of email addresses entered by users.

3. Ensure that passwords meet the required complexity criteria (e.g., minimum length, containing both letters and
numbers).

4. Verify that password and confirm password fields match.

5. Optionally, perform additional validation specific to your application's requirements (e.g., username
uniqueness).

User Login Validation:

1. Validate that both the username/email and password fields are filled in before allowing login.

2. Verify the entered credentials against the stored user database.

3. Optionally, implement additional security measures like rate limiting or CAPTCHA to prevent brute-force
attacks.

User Profile Validation:

2. Implement additional validation for fields like phone numbers, addresses, or other user-specific information.

3. Ensure any changes made to the profile are correctly saved and updated in the database.

Payment by Credit Card Validation:

1. Validate the credit card number format (e.g., using regex) to ensure it matches a valid credit card pattern.

2. Implement the Luhn algorithm to validate the credit card number's checksum.

3. Verify the expiration date and CVV number against their respective criteria.

4. Optionally, integrate with a payment gateway to perform real-time validation or verification.

Coding:

registration.html:

<form id="registrationForm" onsubmit="validateRegistration(event)">

<label for="fullName">Full Name:</label>

<input type="text" id="fullName" required>

<label for="email">Email:</label>

<input type="email" id="email" required>

<label for="password">Password:</label>

<input type="password" id="password" required>

<label for="confirmPassword">Confirm Password:</label>

<input type="password" id="confirmPassword" required>

<button type="submit">Register</button>

</form>
registration.js

<script src="registration.js"></script>

function validateRegistration(event) {

event.preventDefault();

const fullNameInput = document.getElementById("fullName");

const emailInput = document.getElementById("email");

const passwordInput = document.getElementById("password");

const confirmPasswordInput = document.getElementById("confirmPassword");

const fullName = fullNameInput.value;

const email = emailInput.value;

const password = passwordInput.value;

const confirmPassword = confirmPasswordInput.value;

if (!fullName || !email || !password || !confirmPassword) {

alert("Please fill in all required fields.");

return;

if (password !== confirmPassword) {

return;

// Additional validation logic for registration page

login.html

<form id="loginForm" onsubmit="validateLogin(event)">

<label for="loginEmail">Email:</label>

<input type="email" id="loginEmail" required>

<label for="loginPassword">Password:</label>

<input type="password" id="loginPassword" required>

<button type="submit">Login</button>

</form>

<script src="login.js"></script>

login.js

function validateLogin(event) {

event.preventDefault();

const emailInput = document.getElementById("loginEmail");

const passwordInput = document.getElementById("loginPassword");

const password = passwordInput.value;

if (!email || !password) {

alert("Please fill in all required fields.");

return;

// Additional validation logic for login page

profile.html

<form id="profileForm" onsubmit="validateProfile(event)">

<label for="username">Username:</label>

<input type="text" id="username" required>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" required>

<label for="address">Address:</label>

<input type="text" id="address" required>

<button type="submit">Save</button>

</form>

<script src="profile.js"></script>
profile.js

<form id="profileForm" onsubmit="validateProfile(event)">

<label for="username">Username:</label>

<input type="text" id="username" required>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" required>

<label for="address">Address:</label>

<input type="text" id="address" required>

<button type="submit">Save</button>

</form>

<script src="profile.js"></script>

payment.html

<form id="paymentForm" onsubmit="validatePayment(event)">

<label for="cardNumber">Card Number:</label>

<input type="text" id="cardNumber" required>

<label for="expirationDate">Expiration Date:</label>

<input type="text" id="expirationDate" required>

<label for="cvv">CVV:</label>

<input type="text" id="cvv" required>

<button type="submit">Pay</button>

</form>
<script src="payment.js"></script>

payment.js

function validatePayment(event) {

event.preventDefault();

const cardNumberInput = document.getElementById("cardNumber");

const expirationDateInput = document.getElementById("expirationDate");

const cvvInput = document.getElementById("cvv");

const cardNumber = cardNumberInput.value;

const expirationDate = expirationDateInput.value;

const cvv = cvvInput.value;

if (!cardNumber || !expirationDate || !cvv) {

alert("Please fill in all required fields.");

return;

// Additional validation logic for payment page

Output :

Result : The above experiment has completed successfully