added pop out and form valiation

6 months ago · 8bafb759d7
parent b54903e06e
commit 8bafb759d7
2 changed files with 36 additions and 6 deletions
--- a/createAccount.php
+++ b/createAccount.php
@ -6,6 +6,36 @@
    <title>Create Account - Temphire</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/2.6.0/full.css" rel="stylesheet">
+    <script>
+        function validateForm() {
+            const password = document.getElementById('password').value;
+            const contact = document.getElementById('contact').value;
+            const passwordError = document.getElementById('password-error');
+            const contactError = document.getElementById('contact-error');
+
+            let isValid = true;
+
+            // Password validation
+            const passwordCriteria = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+            if (!passwordCriteria.test(password)) {
+                passwordError.textContent = "Password must be at least 8 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character.";
+                isValid = false;
+            } else {
+                passwordError.textContent = "";
+            }
+
+            // Contact validation
+            const contactCriteria = /^\d{10}$/;
+            if (!contactCriteria.test(contact)) {
+                contactError.textContent = "Contact number must be exactly 10 digits.";
+                isValid = false;
+            } else {
+                contactError.textContent = "";
+            }
+
+            return isValid;
+        }
+    </script>
 </head>
 <body class="min-h-screen bg-base-200">
    <?php include 'navbar.php'; ?>
@ -16,7 +46,7 @@
                <div class="card-body">
                    <h2 class="card-title text-2xl font-bold text-center mb-6">Create Account</h2>
                    
-                    <form method="post" action="register.php" class="space-y-4">
+                    <form method="post" action="register.php" class="space-y-4" onsubmit="return validateForm();">
                        <!-- Name Fields -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="form-control">
@ -49,7 +79,8 @@
                            <label class="label">
                                <span class="label-text">Contact</span>
                            </label>
-                            <input type="number" name="contact" id="contact" class="input input-bordered w-full" />
+                            <input type="text" name="contact" id="contact" class="input input-bordered w-full" inputmode="numeric" pattern="\d*" required />
+                            <small id="contact-error" class="text-error"></small>
                        </div>

                        <!-- Email -->
@ -74,12 +105,11 @@
                                <span class="label-text">Password</span>
                            </label>
                            <input type="password" name="password" id="password" class="input input-bordered w-full" required />
+                            <small id="password-error" class="text-error"></small>
                        </div>

                        <!-- Submit Button -->
-                        <!-- <div class="form-control mt-9"> -->
                        <button type="submit" name="signup" class="btn btn-primary btn-sm w-full">Sign up</button>
-                        <!-- </div> -->
                    </form>
                </div>
            </div>
--- a/register.php
+++ b/register.php
@ -21,7 +21,7 @@ if (isset($_POST['signup'])) {
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
-        echo "<script>alert('Email address already exists.');</script>";
+        echo "<script>alert('Email address already exists.');window.location.href = 'createAccount.php';</script> ";
        exit();
    } else {
        // Insert user into the database using prepared statement