After alert it will stay on the same page

Question

I need help on my sign up page. I made an alert for the users to see that all the fields are required . My problem is every time I click OK on the alert it redirects to signupMysql.php which is a blank page. Want I want is for it to stay on signup.php as long as some as the fields are not complete.

I think the action has something to do with my problem.

Here is my signup.php

<form class="register-form" action="signupMysql.php" method="post">
  <p class="message">Don't have an account?</p>
  <input type="text" placeholder="Username" name="username">
  <input type="text" placeholder="Last Name" name="lastname">
  <input type="text" placeholder="First Name" name="firstname">
  <input type="text" placeholder="Contact Number" name="contactnum">
  <input type="text" placeholder="Email address" name="email">
  <input type="password" placeholder="Password" name="password">
  <input type="password" placeholder="Re-enter Password" name="repassword">
  <input type="Submit" value="Sign Up">

</form>

some of the codes of my signupMysql.php

if (empty($username) || empty ($lastname) || empty($firstname) || 
empty($contactnumber) || empty($email) 
|| empty ($password) || empty ($repassword)){

$message = "Fill all fields";
echo "<script type='text/javascript'>alert('$message');</script>";


}

I hope someone could help me. Thank you so much in advance.

Answer 1

In the forms, try to add the required attribute. For example;

<input type="text" placeholder="Username" name="username" required/>

This will prevent users from submitting empty values.

Also, alert() will not stop them as it just displays information and does not do anything else

Answer 2

Please add one more statement after echo in signupMysql.php

header("location:signup.php");

If you strictly want the validation to be done through PHP then you can use this code. Also if you want it to be done before the form is actually submitted you can use the code given by Douglas Hosea.

Hope it helps! All the best!

Answer 3

Your problem is that your form is submitting and you are being taken to the next page where you have your validation. If you don't want the user to leave the page when the form is not complete, you will need some form validation in the browser using JavaScript and/or HTML5.

You can stop the form from submitting using JavaScript: How to prevent form from being submitted?

Or you can look into HTML5 form validation and the "required" attribute: Required attribute HTML5 https://www.w3schools.com/tags/att_input_required.asp

Answer 4

I think you need something like this:

<form class="register-form" id="myform" action="signupMysql.php" method="post">
...
  <input type="button"  onclick="subme()" value="Submit Form">
</form>

for the javascript code:

function subme(){
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i += 1) {
        if(inputs[i].value == ''){
             alert("All field must be filled")
             exit()
        }
    }​​​​
    document.getElementById("myForm").submit()
}

Answer 5

Try below code its what you want.

if (empty($username) || empty ($lastname) || empty($firstname) || 
            empty($contactnumber) || empty($email) 
            || empty ($password) || empty ($repassword))
        { 
           $_SESSION['messege'] = "Fill all fields";
           header("location:signup.php");
        }

In your signup.php

<?php if(isset($_SESSION['messege']) &&  $_SESSION['messege'] != ''){
echo "<script type='text/javascript'>alert('$_SESSION['messege']');</script>";
}?>

Answer 6

You can validate form before posting to server.

Form "submit" event can be handled by javascript (you can google how to do it with jquery)

here is the solution without any libs (add this code right after the form):

<script>
document.getElementsByTagName('form')[0].addEventListener('submit', function(evt){
    if(document.getElementsByName("email")[0].value == "") {
       alert("You forgot to enter email!");
       evt.preventDefault();
    }
    /// .... put other checks here
})
</script>

Note: evt.preventDefault() will prevent your form from posting

Answer 7

Use retrun false to stay on the same page unless its not validate

JavasScript:

<script>
function validation() {
 var isValid = true;
 //perform your validation on form and update isValid variable accordingly.

 if(isValid) {
    window.location = ''; // your desired location
 }

 return false; // always return false to prevent form from submission.
}
</script>