Question 221616 in PHP Question posted in
Official manual can be found here.

Php – Javascript validation for a form stops the form data from being submitted to mysql database

Am using justvalidate to validate a users signup form, checked the console and there seems to be no issues with the validation but the data the user is submitting just won’t get sent to mysql .

Here is the signup form

<?php
include('classes/DB.php');

if (isset($_POST['createaccount'])) {

    $username = $_POST['username'];
    $name = $_POST['name'];
    $lastname = $_POST['lastname'];
    $password = $_POST['password'];
    $email = $_POST['email'];
       
    DB::query('INSERT INTO users VALUES ('', :username,:name,:lastname, :password, :email, '0', '')', 
        array(':username'=>$username,':name'=>$name,
              ':lastname'=>$lastname, ':password'=>$password, 
              ':email'=>$email));
    echo "Success!";
}

?>
<html>
    <head>
        <title>Signup</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
        <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js" defer></script>
        <script src="/js/validation.js" defer></script>

        <h1>Register</h1>
        <form action="create-account.php" method="post" id="signup" novalidate>
            <input type="text" id="username"name="username" value="" placeholder="Username ..."><p />
            <input type="text"id="name" name="name" value="" placeholder="name ..."><p />
            <input type="text" id="lastname"name="lastname" value="" placeholder="lastname ..."><p />
            <input type="password"id="password" name="password" value="" placeholder="Password ..."><p />
            <input type="email" id="email"name="email" value="" placeholder="[email protected]"><p />
            <input type="submit"  name="createaccount" value="Create Account">
        </form>
    </head>
<body>

And here is the javascript validation

const validation = new window.JustValidate("#signup");

validation
    .addField("#username",  [{rule: "required"}])
    .addField("#name",      [{rule: "required"}])
    .addField("#lastname",  [{rule: "required"}])
    .addField("#password",  [{rule: "required"},
                             {rule: "password"}])
    
    .onSuccess((event) => {
        console.log("Form is valid. Submitting...");
        document.getElementById("signup").submit();
    });

Note this javascript validation is not complete or anything I still have to better the password and email verification but the problem still lies at hand, none of the values will get submitted even if in the console it says "Form is valid. Submitting…"

Tags:

2

Answers


  1. 0

    The OP’s code base behaves as intended as soon as the defer attribute has been removed from the script tag which is related to loading the JustValidate library.

    With defer one mostly will trigger a TypeError due to the instantiation of a not yet existing window.JustValidate constructor.

    … without defer …

    const validation = new window.JustValidate("#signup");

validation
  .addField("#username",  [{rule: "required"}])
  .addField("#name",      [{rule: "required"}])
  .addField("#lastname",  [{rule: "required"}])
  .addField("#password",  [{rule: "required"}, {rule: "password"}])
  .onSuccess((event) => {
      // event.preventDefault();
      console.log("Form is valid. Submitting...");
      document.getElementById("signup").submit();
  });
    body { zoom: .75; margin: 0; }
h1 { font-size: 1.2em!important; }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

<h1>Register</h1>
<form id="signup" novalidate>
<!-- <form action="create-account.php" method="post" id="signup" novalidate> //-->
  <input type="text" id="username"name="username" value="" placeholder="Username ..."><p />
  <input type="text"id="name" name="name" value="" placeholder="name ..."><p />
  <input type="text" id="lastname"name="lastname" value="" placeholder="lastname ..."><p />
  <input type="password"id="password" name="password" value="" placeholder="Password ..."><p />
  <input type="email" id="email"name="email" value="" placeholder="[email protected]"><p />
  <input type="submit"  name="createaccount" value="Create Account">
</form>

    … with defer as of the OP’s original example code …

    const validation = new window.JustValidate("#signup");

validation
  .addField("#username",  [{rule: "required"}])
  .addField("#name",      [{rule: "required"}])
  .addField("#lastname",  [{rule: "required"}])
  .addField("#password",  [{rule: "required"}, {rule: "password"}])
  .onSuccess((event) => {
      // event.preventDefault();
      console.log("Form is valid. Submitting...");
      document.getElementById("signup").submit();
  });
    body { zoom: .75; margin: 0; }
h1 { font-size: 1.2em!important; }
.as-console-wrapper {
  left: auto!important;
  min-height: 100%;
  width: 66%;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script defer src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

<h1>Register</h1>
<form id="signup" novalidate>
<!-- <form action="create-account.php" method="post" id="signup" novalidate> //-->
  <input type="text" id="username"name="username" value="" placeholder="Username ..."><p />
  <input type="text"id="name" name="name" value="" placeholder="name ..."><p />
  <input type="text" id="lastname"name="lastname" value="" placeholder="lastname ..."><p />
  <input type="password"id="password" name="password" value="" placeholder="Password ..."><p />
  <input type="email" id="email"name="email" value="" placeholder="[email protected]"><p />
  <input type="submit"  name="createaccount" value="Create Account">
</form>
    Login or Signup to reply.
  2. 0

    I think your problem is that

    if (isset($_POST['createaccount']))

    is never true, and that means it never tries to insert the data into the database.

    This happens because when you use the JavaScript submit function like this:

    document.getElementById("signup").submit();

    to submit the form, it does not send the createaccount parameter. That parameter is only sent if the button it belongs to was directly pressed to submit the form, which isn’t happening in this case.

    To work round it, you can use a different test in your PHP. I’d suggest that, if you require all those fields to be present in order for the form to be valid, you need to check all of them in the PHP before allowing the insert. (You cannot rely entirely on the JS validation, as, like any client-side functionality it can easily be bypassed, so its only real purpose is to try and improve the user experience.)

    Try this instead:

    if (isset($_POST['username'], $_POST['name'], $_POST['lastname'], $_POST['password'])) {

    Reference:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search