Member Avatar for bjeffries

I have a Join page on my site(which also has a login form).

Is it easy to write java-script to determining if they do not have matching passwords(re-type password for Join form) or a valid email without redirecting you from the page? That way if something is wrong it shows a red star or something asking them to retype the password or enter a valid email address.

Is that something hard to write in java? Then if the information is valid it uses php to create or login the user and redirects them to the home page.

  • 4 Contributors
  • 4 Replies
  • 262 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by gunnarflax

Dani AI

Generated

Short answer: use client-side checks for immediate feedback and PHP for authoritative validation and storage. As suggested, a quick compare of the two password fields improves UX; and pointed to helper libraries, but a small HTML5 + vanilla JS approach is simple, accessible, and easy to maintain.

Example approach (HTML5 + Constraint Validation API + JS for live feedback):

<form id="joinForm" novalidate>
  <input name="email" type="email" required />
  <input name="password" type="password" minlength="8" required />
  <input name="confirm_password" type="password" required />
  <button type="submit">Join</button>
</form>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('joinForm');
  const email = form.querySelector('input[name="email"]');
  const pass = form.querySelector('input[name="password"]');
  const pass2 = form.querySelector('input[name="confirm_password"]');

  function validateEmail() {
    email.setCustomValidity(email.validity.typeMismatch ? 'Enter a valid email.' : '');
  }

  function validatePasswords() {
    pass2.setCustomValidity(pass.value && pass2.value && pass.value !== pass2.value ? 'Passwords do not match.' : '');
  }

  email.addEventListener('input', validateEmail);
  pass.addEventListener('input', validatePasswords);
  pass2.addEventListener('input', validatePasswords);

  form.addEventListener('submit', function(e) {
    validateEmail();
    validatePasswords();
    if (!form.checkValidity()) { e.preventDefault(); form.reportValidity(); }
  });
});

Server-side essentials (PHP): always re-validate, filter inputs, use prepared statements, and hash passwords with password_hash()/password_verify(). Example pattern:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
  $password = $_POST['password'] ?? '';
  if (!$email || strlen($password) < 8) { /* handle error */ }
  $hash = password_hash($password, PASSWORD_DEFAULT);
  // store with prepared statements (PDO)
}

Critical notes: require HTTPS; never trust client-side checks alone; implement CSRF tokens and rate limiting; avoid leaking whether an email exists on login responses; test with JS disabled and in multiple browsers. This combination gives fast, user-friendly feedback while keeping account creation and authentication secure.

Recommended Answers

All 4 Replies

Member Avatar for gunnarflax

You do that with JavaScript. What you do is retreiving the values from the both password fields and compare them to each other, if they do match you change the "not the same image" to the "the same image". The best way would probably be that the script is called every time the user have pressed a key on the keyboard with the "onkeyup" attribute on the password form element :)

This is how I would do it but you can probably just find a plugin that can do it for you.

Member Avatar for gunnarflax

If your problem has been solved, please also mark the thread as solved :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.