验证后如何保留在Bootstrap PopUp表单上？

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 input s.

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>