Is there a way to successfully submit a form in PHP once it has been validated using JavaScript?

Question

Is there a way to successfully submit a form in PHP once it has been validated using JavaScript?

I'm interested in creating a register/login system. I've set up a form in Register.php and handled the validation part in JavaScript, but I'm encountering an issue where no values are being sent to the database upon clicking submit.

Register.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/regStyle.css">
    <title>Register</title>
</head>
...

and this is Script.js

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

...

When submitting the form in register.php, I want the validation to occur first and then proceed with submission based on that. What am I doing wrong?

Thank you.

javascript php ajax forms backend

Answer 1

Answer №1

Within your checkLength function, you have overlooked returning the value stored in the error variable. This oversight causes the error to be updated to NaN and subsequently remains stuck at that erroneous state.

function checkLength(input, min, max) {
    let error = 0;

    if (input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min} characters`);
        error++;
    } else if (input.value.length > max) {
        showError(input, `${getFieldName(input)} must be less than ${max} characters`);
        error++;
    } else {
        showSuccess(input);
    }
    return error;
}

Answer 2

Within your checkLength function, you have overlooked returning the value stored in the error variable. This oversight causes the error to be updated to NaN and subsequently remains stuck at that erroneous state.

function checkLength(input, min, max) {
    let error = 0;

    if (input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min} characters`);
        error++;
    } else if (input.value.length > max) {
        showError(input, `${getFieldName(input)} must be less than ${max} characters`);
        error++;
    } else {
        showSuccess(input);
    }
    return error;
}

Answer 3

Answer №2

Avoid using the submit event to validate the form and instead utilize the built-in form validation feature. Ensure all required form fields have the attribute required so that the form will only be submitted if all fields are valid.

If you listen for the invalid event, you can display error messages accordingly. Additionally, you can check if a form field is valid when the user inputs data and remove any errors as needed.

The only missing piece is the accurate regular expression for validating email addresses. I included one that I've used before, but it may not validate in the same way as yours does.

document.forms.registration.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

document.forms.registration.addEventListener('input', e => {
  let form = e.target.form;
  if(e.target.validity.valid){
    e.target.classList.remove('invalid');
  }
  if(e.target.name == 'password'){
    form.password2.pattern = `^${e.target.value}$`;
  }
});

small {
  visibility: hidden;
}

input.invalid ~ small {
  visibility: visible;
}

<form name="registration" class="form" action="register.php" method="POST">
  <h2>Register With Us</h2>
  <div class="form-control">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" placeholder="Enter username"
      minlength="3" maxlength="15" required>
    <small>Password must be between 3 and 15 characters.</small>
  </div>
  <div class="form-control">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="Enter Email" name="email"
     pattern="^[a-z0-9!#$%&'*+\/=?^_`\{\|\}~\-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`\{\|\}~\-]+)*@(?:[a-z0-9](?:[a-z0-9\-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9\-]*[a-z0-9])?$" required>
    <small>Email is not valid.</small>
  </div>
  <div class="form-control">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="Enter password"
      minlength="6" maxlength="25" required>
    <small>Password must be between 6 and 25 characters.</small>
  </div>
  <div class="form-control">
    <label for="password2">Confirm Password </label>
    <input type="password" id="password2" placeholder="Enter password again" required>
    <small>Passwords do not match.</small>
  </div>
  <button type="submit" name="signup">Signup</button>
</form>

Answer 4

Avoid using the submit event to validate the form and instead utilize the built-in form validation feature. Ensure all required form fields have the attribute required so that the form will only be submitted if all fields are valid.

If you listen for the invalid event, you can display error messages accordingly. Additionally, you can check if a form field is valid when the user inputs data and remove any errors as needed.

The only missing piece is the accurate regular expression for validating email addresses. I included one that I've used before, but it may not validate in the same way as yours does.

document.forms.registration.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

document.forms.registration.addEventListener('input', e => {
  let form = e.target.form;
  if(e.target.validity.valid){
    e.target.classList.remove('invalid');
  }
  if(e.target.name == 'password'){
    form.password2.pattern = `^${e.target.value}$`;
  }
});

small {
  visibility: hidden;
}

input.invalid ~ small {
  visibility: visible;
}

<form name="registration" class="form" action="register.php" method="POST">
  <h2>Register With Us</h2>
  <div class="form-control">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" placeholder="Enter username"
      minlength="3" maxlength="15" required>
    <small>Password must be between 3 and 15 characters.</small>
  </div>
  <div class="form-control">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="Enter Email" name="email"
     pattern="^[a-z0-9!#$%&'*+\/=?^_`\{\|\}~\-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`\{\|\}~\-]+)*@(?:[a-z0-9](?:[a-z0-9\-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9\-]*[a-z0-9])?$" required>
    <small>Email is not valid.</small>
  </div>
  <div class="form-control">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="Enter password"
      minlength="6" maxlength="25" required>
    <small>Password must be between 6 and 25 characters.</small>
  </div>
  <div class="form-control">
    <label for="password2">Confirm Password </label>
    <input type="password" id="password2" placeholder="Enter password again" required>
    <small>Passwords do not match.</small>
  </div>
  <button type="submit" name="signup">Signup</button>
</form>

Is there a way to successfully submit a form in PHP once it has been validated using JavaScript?

Answer №1

Answer №2

Similar questions

What is the best method for retrieving values from a FlexiGrid?

Tips for implementing rtlcss node package with twitter-bootstrap in Laravel framework

Ways to consistently press a particular button every single second

What is the best way to differentiate between PHP's callable types?

Synchronize Magento cart totals and items using AJAX

Save your AngularJS SVG file as a JPG

Exploring asynchronous data handling in AngularJS using promises

"Experiencing issues with the Ajax search functionality, need assistance

Using PHP to convert JSON data into the Google Chart API

Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Exploring search capabilities within D3 graph nodes

The initial io.emit message seems to always be delayed or lost in transmission

Choose a file at random from the folder, assigning probabilities based on the file names

Steps for modifying material-ui timepicker to display time in a 24-hour format

Utilize node.js to run a local .php file within a polling loop

Determine the initial left position of a div element in CSS prior to applying

Enhance the current model in backbone.js by incorporating additional data

deliver a promise with a function's value

WordPress presents a challenge with PHP Heredoc not displaying variables in HTML

Sort information based on the initial letter