Scribd
Upload
5 views9 pages

1 A

The document contains HTML code for two login forms, with one form focusing on user credentials and the other on validating input fields such as username, password, mobile number, and email. It includes JavaScript functions for form validation and XMLHttpRequest examples to fetch data from text and XML files. Additionally, there is a section for displaying book details from an XML file using a table format.

Uploaded by

divyareddyguduru456
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views9 pages

1 A

The document contains HTML code for two login forms, with one form focusing on user credentials and the other on validating input fields such as username, password, mobile number, and email. It includes JavaScript functions for form validation and XMLHttpRequest examples to fetch data from text and XML files. Additionally, there is a section for displaying book details from an XML file using a table format.

Uploaded by

divyareddyguduru456
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

1a.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<form>

<label for="name">name :</label>

<input type="text" id="html" name="name" >

<br>

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

<input type="text" id="html" name="password" >

<br>

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

<input type="text" id="html" name=" confirm password">

<br>

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

<input type="email" id="html" name="email" >

<br>

<label for="mobile">mobile number :</label>

<input type="number" id="html" name="mobile " value="HTML">

<br>

</form>

</head>

<body>

<button>Login </button>

<button>reset</button>
</body>

</html>

1B

<!DOCTYPE html>

<html>

<head>

<title>Login Page</title>

<style>

body {

font-family: sans-serif;

.error {

color: red;

font-size: small;

</style>

</head>

<body>

<h2>Login</h2>

<form id="loginForm" onsubmit="return validateForm()">

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

<input type="text" id="username" name="username"><br>

<span id="usernameError" class="error"></span><br><br>


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

<input type="password" id="password" name="password"><br>

<span id="passwordError" class="error"></span><br><br>

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

<input type="password" id="confirmPassword" name="confirmPassword"><br>

<span id="confirmPasswordError" class="error"></span><br><br>

<label for="mobile">Mobile Number (10 digits):</label><br>

<input type="tel" id="mobile" name="mobile"><br>

<span id="mobileError" class="error"></span><br><br>

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

<input type="email" id="email" name="email"><br>

<span id="emailError" class="error"></span><br><br>

<input type="submit" value="Login">

</form>

<script>

function validateForm() {

let isValid = true;

// Username validation

const username = document.getElementById("username").value;

const usernameError = document.getElementById("usernameError");

if (!/^[a-zA-Z]{1,25}$/.test(username)) {

usernameError.textContent = "Username must contain 1-25 letters only.";

isValid = false;

} else {
usernameError.textContent = "";

// Password validation

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

const passwordError = document.getElementById("passwordError");

if (!/^(?=.*[A-Z])(?=.*\d{4})(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/.test(password)) {

passwordError.textContent = "Password must be at least 8 characters, with 1 uppercase, 4


numbers, and 1 special character.";

isValid = false;

} else {

passwordError.textContent = "";

// Confirm password validation

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

const confirmPasswordError = document.getElementById("confirmPasswordError");

if (password !== confirmPassword) {

confirmPasswordError.textContent = "Passwords do not match.";

isValid = false;

} else {

confirmPasswordError.textContent = "";

// Mobile number validation

const mobile = document.getElementById("mobile").value;

const mobileError = document.getElementById("mobileError");

if (!/^\d{10}$/.test(mobile)) {

mobileError.textContent = "Mobile number must be 10 digits.";

isValid = false;

} else {
mobileError.textContent = "";

// Email validation

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

const emailError = document.getElementById("emailError");

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {

emailError.textContent = "Invalid email format.";

isValid = false;

} else {

emailError.textContent = "";

return isValid;

</script>

</body>

</html>
2a.

<html>

<body>

<p id="disp"></p>

<h2> the XMLHttpRequest Object </h2>

<button type="button" onclick ="getTextFile()">Click here to get the data from text file </button>

<script>

function getTextFile()

const xhttp = new XMLHttpRequest();

xhttp.open("GET","text.txt");

xhttp.onreadystatechange=function()

if(this.readyState===4 && this.status===200)

{
document.getElementById("disp").innerHTML=this.responseText;

};

xhttp.send();

</script>

</body>

</html>

2b

Xml:
<bookstore>
<book>
<title> programming in "C" </title>
<author> yeswanth </author>
<year> 2005 </year>
<price> $2.3 </price>
</book>
<book>
<title> database </title>
<author> raghuawr </author>
<year> 2002 </year>
<price> $2.3222 </price>
</book>
</bookstore>
<html>
<body>
<h1>The XMLHTTPRequest Object of Books Details</h1>
<button type="button" onclick="loadDoc()">Get BooksDetails</button>
<br><br>
<table id="disp"></table>

<script>
function loadDoc()
{
var xhttp = new XMLHttpRequest();
xhttp.open("GET","data.xml");
xhttp.onreadystatechange = function()
{
if(this.readyState === 4 && this.status === 200)
{
myFunction(this);
}
};
xhttp.send();
}
function myFunction(xml)
{
var i;
var xmlDoc = xml.responseXML;
var
table="<tr><th>Title</th><th>Author</th><th>Year</th><th>Price</th><tr>";
var x = xmlDoc.getElementsByTagName("book");
for(i=0;i<x.length;i++)
{
table += "<tr><td>" + x[i].getElementsByTagName("title")
[0].childNodes[0].nodeValue + "</ts><td>" +
x[i].getElementsByTagName("author")
[0].childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("year")
[0].childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("price")
[0].childNodes[0].nodeValue + "</td><td>";
}
document.getElementById("disp").innerHTML = table;
}
</script>
</html>
</body>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy