Untitled
unknown
plain_text
2 years ago
7.8 kB
2
Indexable
<%@page import="Models.Account"%> <%@page import="java.sql.ResultSet"%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Update Information</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } .card { border-radius: 4px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-bottom: 20px; overflow: hidden; } .card-title { background-color: #2196F3; color: #fff; padding: 15px; margin: 0; font-size: 24px; } .form-row { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid #ccc; } .form-label { font-weight: bold; } .form-input { flex: 1; margin-left: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .form-actions { padding: 15px; text-align: right; } .btn { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 10px 5px; cursor: pointer; border-radius: 4px; } .btn-primary { background-color: #2196F3; } .btn-primary:hover { background-color: #0b7dda; } </style> </head> <body> <% ResultSet rs = (ResultSet) request.getAttribute("rs"); if (rs.next()) { %> <div class="container"> <div class="card"> <div class="card-title">Update Information</div> <form action="" method="post"> <div class="form-row"> <div class="form-label">Full Name:</div> <input type="text" class="form-input" name="Fullname" value="<%= rs.getString("Fullname")%>" required> </div> <div class="form-row"> <div class="form-label">User Name:</div> <input type="text" class="form-input" name="Username" value="<%= rs.getString("Username")%>" required> </div> <div class="form-row"> <div class="form-label">Mobile Number:</div> <input type="text" class="form-input" name="Mobile_Number" value="<%= rs.getString("Mobile_Number")%>" required> </div> <div class="form-row"> <div class="form-label">Email:</div> <input type="email" class="form-input" name="Email" value="<%= rs.getString("Email")%>" required> </div> <div class="form-row"> <div class="form-label">Address:</div> <input type="text" class="form-input" name="Address" value="<%= rs.getString("Address")%>" required> </div> <div class="form-row"> <div class="form-label">Gender:</div> <select name="slctGender" id="cars"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-row"> <div class="form-label">Date of Birth:</div> <input type="date" class="form-input" name="DoB" value="<%= rs.getDate("Birthday")%>" required> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary" name="btnUpdate" value="Update">Submit</button> </div> </form> </div> </div> <% } %> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // Validate Full Name $('#fullname').on('input', function() { var fullname = $(this).val(); if (fullname.length > 50) { $(this).addClass('error'); } else { $(this).removeClass('error'); } }); // Validate Username $('#username').on('input', function() { var username = $(this).val(); if (username.length > 20) { $(this).addClass('error'); } else { $(this).removeClass('error'); } }); // Validate Mobile Number $('#mobile').on('input', function() { var mobile = $(this).val(); if (!/^0[1-9][0-9]{8}$/.test(mobile)) { $(this).addClass('error'); } else { $(this).removeClass('error'); } }); // Validate Email $('#email').on('input', function() { var email = $(this).val(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { $(this).addClass('error'); } else { $(this).removeClass('error'); } }); // Validate Address $('#address').on('input', function() { var address = $(this).val(); if (address.length > 50) { $(this).addClass('error'); } else { $(this).removeClass('error'); } }); // Validate Date of Birth $('#dob').on('change', function() { var dob = new Date($(this).val()); var now = new Date(); if (dob >= now) { $(this).addClass('error'); } else { $(this).removeClass('error'); } }); }); function validateForm() { var isValid = true; $('.form-input').each(function() { if ($(this).hasClass('error')) { isValid = false; return false; // Stop iteration } }); return isValid; } </script> </html>
Editor is loading...