Secure Your PHP Registration Forms with Phone Validation
Stop spam and fraudulent sign-ups at the source. This cookbook provides a complete, server-side example for validating user phone numbers in a PHP registration form before an account is ever created.
The Goal
This example demonstrates a robust, backend-focused approach. A simple HTML form submits a phone number to a PHP backend. The backend then uses the Payloadic Phone Validator API to verify the number's authenticity. This server-side validation is crucial for security as it cannot be bypassed by malicious users manipulating client-side code.
How It Works
The process is broken down into three simple files:
register.php: A basic HTML form that captures the user's phone number and uses JavaScript to send it to our backend.apiClient.php: The main PHP endpoint that receives the phone number, calls our validation logic, and returns a JSON response.validate.php: A reusable PHP function that handles the actual cURL request to the Payloadic Phone Validator API.
<!-- register.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
<style>
/* Add some basic styling for the form */
body { font-family: sans-serif; margin: 2rem; }
.form-group { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.5rem; }
input { width: 100%; padding: 0.5rem; }
button { padding: 0.75rem 1.5rem; cursor: pointer; }
#message { margin-top: 1rem; padding: 1rem; border-radius: 5px; }
.success { background-color: #e6fffa; color: #2d6a5f; }
.error { background-color: #fff5f5; color: #c53030; }
</style>
</head>
<body>
<h1>Create Your Account</h1>
<form id="registrationForm">
<div class="form-group">
<label for="phone">Phone Number (with country code)</label>
<input type="tel" id="phone" name="phone" placeholder="+14155552671" required>
</div>
<button type="submit">Register</button>
</form>
<div id="message" style="display:none;"></div>
<script>
document.getElementById('registrationForm').addEventListener('submit', async function (e) {
e.preventDefault();
const phone = document.getElementById('phone').value;
const messageDiv = document.getElementById('message');
messageDiv.style.display = 'none';
try {
const response = await fetch('apiClient.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ phone: phone })
});
const result = await response.json();
if (response.ok && result.success) {
messageDiv.className = 'success';
messageDiv.textContent = 'Success! Phone number is valid.';
} else {
messageDiv.className = 'error';
messageDiv.textContent = 'Error: ' + (result.message || 'Could not validate phone number.');
}
} catch (error) {
messageDiv.className = 'error';
messageDiv.textContent = 'A network error occurred. Please try again.';
} finally {
messageDiv.style.display = 'block';
}
});
</script>
</body>
</html>Key Steps Explained
1. User Submits Form: The user enters their phone number in register.php and clicks "Register". The form's JavaScript prevents the default submission and instead sends an asynchronous fetch request to our PHP backend.
2. Backend Receives Request: apiClient.php receives the POST request. It first checks for a valid 'phone' number in the JSON payload.
3. API Validation: The script then calls the validatePhoneNumber() function from validate.php. This function securely constructs and executes a cURL request to the Phone Validator API, passing along your API key.
4. Handle the Response: Based on the API's response, apiClient.php determines if the number is valid. It sends back a JSON response to the frontend, indicating success or failure. In a real application, a successful validation would be followed by creating the user account in your database.