Modal form validation using Bootstrap

If someone is still in need ... something like this can be done, first cancels the form submit with event.preventDefault () then scans all $. () to check if they are filled, and finally the $ .ajax call working the return.

<script>
var form = $('.form-validation')[0];
if(form != undefined){
    form.addEventListener('submit', function(event) {
            if (!event.target.checkValidity()) {
                event.preventDefault();
                $('.form-validation [required]').each(function(i, o){
                    if(!$(o).val().length){
                        $(o).addClass('input-error');
                    } else {
                        $(o).removeClass('input-error');
                    }
                });
                if($('.input-error').length == 0){
                    $.ajax({
                        type: 'post',
                        url: 'teste.php's,
                        data: $('.form-validation').serialize(),
                        contentType: 'application/x-www-form-urlencoded',
                        success: function(response) {
                            if(response.status == 'salvo') {
                                alert('salvo');
                            } else if (response.status == 'duplicado'){
                                alert('duplicado');
                            }
                        },
                        error: function(xhr, error) {
                            alert(error);
                        }
                    })
                }
            }
        }, false);
</script>

and in the .php file you have to return a json, to work on the response parameter

<?php
    $sql = mysql_query("SELECT nome FROM tb_visitas WHERE nome='{$_POST['nome']}'");

    if (mysql_num_rows($sql) > 0) {
        echo json_encode(array('status'=>'duplicado'));
    } else {
        //SQL INSERT INTO tb_visitas
        echo json_encode(array('status'=>'salvo'));
    }
 ?>

Of course, it's not just because the code will work as magic, it does an analysis of the solution.

Yes, it is perfectly simple:

• the form is out of modal and "submit" opens the modal
• inserts a "loading of life" in the modal
• and return via modal callback (AJAX);

$(function(){

   $.ajax({
     url : 'update.php',
     type : 'POST',
     data : info_do_formulario,
     beforeSend : function(){
       // insere algum loading dentro do modal
       $('#myModal').modal('show'); // abre o modal
     },
     success : function(data){
       // substitui o loading pelo callback 'data', com a sua resposta específica
     }
   });


});

The best way to do this according to your code is through JavaScript. From what I realize you're using jQuery , then validate whether the fields are empty or not very simple. For example:

if ($('#username').val() != '') {
  alert('campo preenchido');
} else {
  alert('campo vazio');
}

Regarding the query in the database to check if the value is not duplicated, you can do it using jQuery's own Ajax method, where you will make a request to a PHP file on the server that will execute a query in the database and return true or false (in json) if the value already exists or not.

In an exemplified way it would be the following:

$.ajax({
  url: 'http://dominio.com/arquivo.php', // arquivo PHP que consultará o BD
  data: {'username':$('#username').val()}, // conteúdo do campo username
  success: function(resultado) {
    // verificando o json que retornou
    if (resultado.status == true) {
      alert('nome válido');
    } else {
      alert('nome duplicado');
    }
  },
  dataType: json
});