How to stay on a Bootstrap PopUp form after validation? - php

Question

I'm actually developing a Web site where you can register yourself from a form.
I've create a code in PHP for managing the errors which could happen (wrong number, mail...)
Here is my problem : When I send the form, I cant manage to stay on it to overwrite the form with the errors encounters (if there are some).
I'm using Bootstrap form the form and I have absolutely no clue of how to do that.
This is the my HTML
<div class="modal fade" id="ins" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form id="FormIns" action="Index.php" method="post">
<div class="modal-header">
<h4 class="text-center">Inscription</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="lastname" id="lname" placeholder="Nom" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="firstname" id="fname" placeholder="Prénom" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="nid" id="nidentifiant" placeholder="Identifiant" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="password" class="form-control" name="npass" id="npassword" placeholder="Mot de Passe" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="password" class="form-control" name="cnpass" id="cnpassword" placeholder="Confirmer Mot de Passe" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="mail" class="form-control" name="mail" id="mail" placeholder="Adresse Email" maxlength="25">
</div>
</div><br/>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<input type="text" class="form-control" name="phone" id="phone" placeholder="Numéro de Téléphone" maxlength="25">
</div>
</div><br/>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Inscription" name="log">
<a class="btn btn-default" data-dismiss="modal">Annuler</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

Firstly, you should add labels to your form fields. These help with the page as well as give a good entry point for error messages.
A simple approach would be to set the form-action to the form page, and put validation errors in an associative array with values like
$errors['name'] = "Name did not match"; and so on and so forth.
Then you add a <span> at the end of the label like (roughly) this:
<span>
<?php echo (isset($errors['name'])) ? $errors['name'] : "";?>
</span>
</label>
This would make PHP evaluate the errors and put them into the label so they can be easily connected to the field.
Lastly, to continue, you add a redirect to the next page, if the validation is successful, so create a redirect function and send the validated data to the next page.
€: for good effects, you can use php to append the alert or warning class to the corresponding form-control groups or inputs.

Answer 2

If you are using a script to check that the values are right, the first thing you have to do is stop the form action.
<script type="text/javascript">
$("#FormIns").submit(function(e){
e.preventDefault();
// your code to check the form goes here
//once you finished and everything is right then:
$( "#FormIns" ).submit();
});
</script>