提交表格时防止模式关闭

Question

I have a form inside a modal, I want to prevent the modal from closing and refreshing the page after submiting the form if there's errors on some fields and show error messages inside the modal, if everything is okay the modal shoud submit the form and refresh the page.

This is my code :

<div class="modal fade" id="addTeam">
<div class="modal-dialog rap-modal-thumb">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title" id="myModalLabel">Add team</h4>
        </div>
        <div class="modal-body"><br>
              <div class="page-wrap">
                <form action= "<?php echo $action; ?>" enctype="multipart/form-data" method="post">
                  <div class="container">
                        <div class="row">                                                   
                          <div class="input-group input-group-icon">
                              <div class="col-third input-group-icon">
                                <input type="text" id="name" name="name" placeholder="Nom*" required="required">
                                <div class="input-icon"><i class="fa fa-users"></i></div>
                              </div>
                              <div class="col-third input-group-icon">
                                <input type="text" id="abreviation" name="abreviation" placeholder="Abréviation*" required="required">
                                <div class="input-icon"><i class="fa fa-flag-o"></i></div>
                                </div>
                        <br>
                        * Required fields
                        <br><br>
                        <?php
                            if (isset($error)) 
                                echo '<div style="color:#fff;" class="alert bg-danger" role="alert"><em class="fa fa-lg fa-warning">&nbsp;&nbsp;</em>',$erreur,'</div>';  
                        ?>
                        <button type="submit" id="addTeam" name="addTeam" class="btn btn-primary">Ajouter</button>
                    </div>
                </form>
            </div>
            <br>
        </div>
    </div>
</div>

In php if for example the name of the team is less than 6 characters then show the error message inside the modal without closing it. In my case here the message appear after the page is refreshed and the show button of the modal is clicked again.

if (isset($_POST['addTeam'])) {
    $name= $_POST['name'];
    if (strlen($name)<3){
        $error = 'Name must be atleast 6 characters';
    }
    else{
        $action = "uploadTeam.php";
    }
}

Anyway to do that ?

Answer 1

If your form is submited by default by the browser, it'll auto-refresh the page (to create a new HTTP POST request to the server)

You have to use AJAX to call the server on background and avoid reloading the content:

// Create an event listener to catch "when the form is submited"
$('.modal-body form').submit(function(event) {
    // to stop the form from submitting (and the page reloading, so the modal will not close)
    event.preventDefault(); 

    // Call server manually and send form data (see Mikey's comment)
    $.post('my.url.com/file.php', $(this).serialize(), function(err, result) {
      if (err) { 
        // Display error on form 
      } else {
        // Success... Redirect ?
        window.location = 'my.new.url/path.html'
      }
    })
});

Answer 2

You will need to override some client behavior for this. In fact, it will be easier for you to do your validation all on the client side (if possible). Override the form's default behavior, validate, and then return true or false based on the results of your validation function:

<script>
    $('form').on('submit', function(e) {
        if (validate()) { //your validation function here
            return true;
        }
        return false;
    });
    function validate() {
        if (!$('input[name=name]').val() || $('input[name=name]').val().length < 3) {
            return false;
        }
        return true;
    }
</script>