How to submit the form only if the field is completed

Asked

Viewed 177 times

0

In the form below, I ran tests with the blank fields, but the function validate does not seem to be called.

In addition, the PHP program (if(isset($_POST['register']))) will only run if the event onsubmit (calling the Javascript function) return true? Anyway the script should not return an alert (regardless of whether the program runs or not)?

function validate(form) {
    fail  = validateForename(form.f_name.value);
    if (fail == "") { return true; }
    else { alert('fail'); return false; }
};
 
function validateForename(field)
{
    if (field == "") { return "No Forename was entered.\n"; }
    else {
    return ""; }
};
<body>
<form action="" method="post">
<input type="text" id="f_name" name="f_name" placeholder="Nome"> 
<input type="submit" value="Register" name="register" onsubmit="return validate(this)" class="aa-browse-btn">
</form>
</body>

<?php
if(isset($_POST['register'])){
        $c_fname = $_POST['f_name'];
        $insert_c = "insert into customers (customer_fname) 
                    values ('$c_fname'')";
?>
javascript form

  • onsubmit is a form attribute not of the Ubmit input. Since apparently you have a php script too, create a <form></form> and place your Submit as an attribute of it. In addition, there are other minor errors that you will need to fix.

  • thank you for answering. It is not clear, it is at experimental level.

1 answer

2

The event of submit refers to the form (form), not to the input, as set out in documentation:

Note that the Submit Event Fires on the <form> element itself, and not on any <button> or <input type="submit"> Inside it. (Forms are submitted, not Buttons.)

So you should put the onsubmit in the form, not in the input:

function validate(form) {
    if (form.f_name.value !== "") return true;
    alert('fail');
    return false;
};
<form action="arquivo.php" method="POST" onsubmit="return validate(this)">
  <input type="text" id="f_name" name="f_name" placeholder="Nome"> 
  <input type="submit" value="Register" name="register" class="aa-browse-btn"> 
</form>

Also note that you don’t need two functions to validate, one is enough: if the value is not empty, it returns true, otherwise, displays the alert and returns false (and that stretch doesn’t necessarily need to be in a block else, because if you enter the if the return is out of function).

Anyway, if the validate return true, the form is submitted and sent to arquivo.php, which is what I put in action. Return false, he is not submitted.

Another way to get the same behavior is by using addEventListener. The code is slightly different, but the idea is the same, only submit the form if the field is filled:

function validate(event) {
    if (event.target.f_name.value === "") {
        alert('fail');
        event.preventDefault();
    }
};

document.querySelector('#formulario').addEventListener('submit', validate);
<form id="formulario" action="arquivo.php" method="POST">
  <input type="text" id="f_name" name="f_name" placeholder="Nome"> 
  <input type="submit" value="Register" name="register" class="aa-browse-btn"> 
</form>

The difference is that now I use addEventListener to register the event of submit, and preventDefault to prevent the form from being submitted.

Another difference is that the function validate now gets a Event, and the form is obtained by accessing the target that Event.

Browser other questions tagged javascript form

You are not signed in. Login or sign up in order to post.