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.

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.

• javascript
• forms
• validation
• alert

7 Answers 7

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();

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();

You have to work with the DOM, e.g. something like this:

$('#errorDiv').append("Error on element" + elementName);

where you have to predefine an error Div ('#errorDiv').

Add hidden div aligned with your elements and show the message on hidden div's instead of alert box.

As mentioned in other answers, you have to work with the DOM. If you have the time, however, I would advice you advice you to not simply copy/paste a line of jquery but to look into what the DOM actually is and how to manipulate it in pure javascript. Here's a starting point:

https://developer.mozilla.org/en/docs/DOM

<form action="" method="post">
<header>
<h2>My Form</h2>
<p>This is my form. Fill it out</p>
 </header>

 <!-- To make a responsive form each element of the form should be in a separate div.!-->
<div id="responsive">

   <div>
  <label for="name"> Enter your information below </label>
             <div><Input type="text" name="name" required placeholder="Sajid Mehmood"           width="100px;" autofocus></div>
       </div>


    </div>
   !-->




   <div>
   <div>
    <Input type="submit" value="Click me" onclick="msg()" >
   </div>
    </div>

  </div>
  </form>

Here is the code I use for a form, maybe it can help.

<script type="text/javascript">
        $('document').ready(function(){

        $('#form').validate({
             ignore: ".ignore",
                rules:{
                    "name":{
                        required:true,
                        maxlength:40
                    },

                    "phone":{
                        required:true,                            
                    },

                    "email":{
                        required:true,
                        email:true,
                        maxlength:100
                    },

                    hiddenRecaptcha: {
                        required: function () {
                            if (grecaptcha.getResponse() == '') {
                                return true;
                            } else {
                                return false;
                            }}},

                    "message":{
                        required:true
                    }},

                messages:{
                    "name":{
                        required:"Please tell us your name"
                    },
                    "phone":{
                        required:"Please tell us your phone number"
                    },

                    "email":{
                        required:"How can we send you information? We promise, we will never give away your email!",
                        email:"Please enter a valid email address"
                    },

                    "hiddenRecaptcha":{
                        required:"Please check the box to show us you are human"  
                    },

                    "message":{
                        required:"Please tell us what we can tell you about this vessel"
                    }},

                submitHandler: function(form){
                  $(form).ajaxSubmit({
    target: '#preview', 
    success: function() { 
    $('#formbox').slideUp('fast'); 
    } 
});     
                }
        })          
    });
    </script>


<div id="preview"></div>
        <div id="formbox">  
        <div>    
        <p class="contactform">Contact Form:</p>  
            <form name="form" id="form" action="http://www.yourdomaingoeshere.com/submit.php" method="post">
            <div class="g-recaptcha" data-sitekey="your site key goes here" style="padding-bottom: 20px!important;"></div>
                    <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
                <ul id="ngothastyle3" class="mylist">                       
                    <li class="mylist">                        
                        <input type="text" placeholder="your name" name="name" class=""  />
                    </li>
                    <li class="mylist">
                        <input type="text" placeholder="phone number" name="phone" class="" />
                    </li>
                     <li class="mylist">                        
                        <input type="text" placeholder="email" name="email" class="" />
                    </li>
                    <li class="mylist">                        
                        <textarea name="message" placeholder="comments" rows="5" cols="45" class=""></textarea>
                    </li>

        </div> 


        <div style="float: right;">
                    <li class="mylist" style="list-style: none;">                        
                        <input type="submit" value="Send"/>
                    </li>
        </div>            
                </ul>
            </form>