<!DOCTYPE html>
<html>
<head>
<title>Address and Zip Code Validation</title>
<style>
body {
font-family: sans-serif;
}
.container {
display: flex;
flex-direction: column;
width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
margin-bottom: 5px;
}
input[type="text"] {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.result {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Address and Zip Code Validation</h2>
<form id="addressForm">
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<label for="postalCode">Postal Code:</label>
<input type="text" id="postalCode" name="postalCode" required>
<button type="submit">Validate</button>
</form>
<div class="result" id="validationResult"></div>
</div>
<script>
const addressForm = document.getElementById('addressForm');
const validationResult = document.getElementById('validationResult');
addressForm.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent default form submission
const address = document.getElementById('address').value;
const postalCode = document.getElementById('postalCode').value;
// Replace with your actual API call and validation logic
validateAddressAndPostalCode(address, postalCode)
.then(isValid => {
if (isValid) {
validationResult.textContent = "Address and Postal Code match!";
} else {
validationResult.textContent = "Address and Postal Code do not match.";
}
})
.catch(error => {
console.error("Error during validation:", error);
validationResult.textContent = "An error occurred during validation.";
});
});
// Placeholder function - Replace with your actual API call and validation logic
async function validateAddressAndPostalCode(address, postalCode) {
// 1. Make an API call to a geocoding service (e.g., Google Maps Geocoding API)
// using the provided address.
// 2. Extract the zip code from the API response.
// 3. Compare the extracted zip code with the provided postalCode.
// 4. Return true if they match, false otherwise.
// Example (using a fake API call for demonstration):
const response = await fetch(`https://fake-api.com/geocode?address=${address}`);
const data = await response.json();
const extractedPostalCode = data.postalCode;
return extractedPostalCode === postalCode;
}
</script>
</body>
</html>Explanation:
- HTML Structure:
- The HTML sets up a form with input fields for “Address” and “Postal Code”.
- A button triggers the validation process.
- A
divwith the ID “validationResult” will display the validation outcome.
- CSS Styling:
- Basic CSS is provided for a simple layout and visual appearance.
- JavaScript Logic:
- Event Listener: An event listener is attached to the form’s “submit” event.
- Form Submission Prevention:
event.preventDefault()prevents the default form submission behavior. - Data Retrieval: The script retrieves the values entered in the “Address” and “Postal Code” fields.
validateAddressAndPostalCodeFunction: This function is a placeholder for your actual API call and validation logic.- API Call: You need to replace the placeholder API call with a real call to a geocoding service (e.g., Google Maps Geocoding API).
- Data Extraction: Extract the zip code from the API response.
- Comparison: Compare the extracted zip code with the provided postal code.
- Return Value: Return
trueif they match,falseotherwise.
- Result Display: The
validationResultelement is updated with the validation outcome.
Important Notes:
- API Key: You’ll need to obtain an API key from a geocoding service (like Google Maps Geocoding API) and include it in your API call.
- API Usage Limits: Be aware of API usage limits and pricing.
- Error Handling: Implement error handling to gracefully handle cases where the API call fails or returns invalid data.
- Real-World Validation: The provided
validateAddressAndPostalCodefunction is a placeholder. You need to implement the actual API call and validation logic based on the chosen geocoding service.
To use this code:
- Replace the placeholder API call and validation logic in the
validateAddressAndPostalCodefunction with your actual implementation. - Obtain an API key from a geocoding service and include it in your API call.
- Save the code as an HTML file (e.g.,
address-validation.html) and open it in a web browser.
This code provides a basic framework for validating addresses and postal codes. You’ll need to adapt it to your specific requirements and integrate it with a suitable geocoding API.
Discover more questions here HTML & CSS
Leave a Reply