onClick() to perform function?

Question

Is it possible for in a form of username and password to perform JS validation with the onClick()? Here is the code:

<form action="signup.php" method="post" name="formInput" onclick="validateForm()">
    Username: <br> <input type="text" name="username" placeholder="Username"><br>
    Password  <br> <input type="password" name="pass" placeholder="Password"><br>
    <input type="submit" name="submit">
</form>

I remember doing it before but cannot remember where to call the actual onClick() in the form creation or in the button submission?

Thanks for any suggestions.

Answer 1

<script>
function validateForm() {
   // if valid return true else false
}
</script>

<form action="signup.php" method="post" name="formInput" onsubmit="return validateForm()">
    Username: <br> <input type="text" name="username" placeholder="Username"><br>
    Password  <br> <input type="password" name="pass" placeholder="Password"><br>
    <input type="submit" name="submit">
</form>

Answer 2

As soon as the submit-button is clicked, signup.php gets executed and your validateForm() is ignored. I do not know why you are trying to validate the data with JavaScript instead of inside the signup.php itself. Furthermore it is almost certainly a huge security-flaw to do the validation on the front-end.

What I suggest you do is to forget about validating in JavaScript, and do it in PHP instead. If you post your validateForm() code we can help you translating it into PHP (and probably improve it as well).

Edit: You have stated that your validation is to make sure the input fields are not empty. So here we go:

<?php
session_start();

$username = $_POST['username'];
$pass = $_POST['pass'];

if (strlen($username) < 1 || strlen($pass) < 1) {
    header(...); //redirect back to the home-page
    $_SESSION['message'] = "Username and password must be filled out.";
}
... //rest of your signup.php
?>

and change the extension of your HTML-page to .php, then add this to the top:

<?php
session_start();

echo("<script> alert('" . $_SESSION['message'] . "'); </script>");
?>

This seems like overkill for such a simple task, and probably is. However you will want to check for other things than the emptiness of the fields, and that has to be done in this way.

However, if you do not care and want a simple way to do it, you can probably disable the submit-button with JavaScript somehow until both fields are filled. Check if both fields are filled with something like onChange = validateForm() function.

Answer 3

解：

<form action="signup.php" method="post" name="formInput" onsubmit="return validateForm()"> Username: <br> <input type="text" name="username" placeholder="Username"><br> Password <br> <input type="password" name="pass" placeholder="Password"><br> <input type="submit" name="submit" onsubmit="validateForm()"> </form>