Show message instead of alert

Question

I am using this amazing javascript to check if all my fields are filled in, but instead of a alert box I want to show a message on my page.

$(document).ready(function() {
$('form').submit(function() {
    var incomplete = $('form :input').filter(function() {
                         return $(this).val() == '';
                     });
    //if incomplete contains any elements, the form has not been filled 
    if(incomplete.length) {
        alert('Vul alle velden in en probeer het nog eens');
        //to prevent submission of the form
        return false;
    }
 });
 });

I tried to play with echo messages but it didn't work.

Answer 1

You can styling your own popup. Or use some plugins.

http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html

Or you can create some element on the page, that will showing the error messages. Write some styles and make it look awesome !

<div class="error-messages" style="display:none;"></div>

After the form sending, and checking errors, write this.

$(".error-messages").text("Some error").fadeIn();

Or you can make it empty and hide it, after a seconds or after user focus.

$(".error-messages").empty().fadeOut();

Answer 2

You can insert a hidden div above your form, and show it instead of the alert

<div class="form-errors"></div>

$(".form-errors").text("The form is not complete").show();