Form submission cancel using javascript not working

Question

OBJECTIVE: I have made a form containing 3 fields, I want that If there's even a single empty field left in form the form , it is recognised and an error message(for each empty field) is printed (not alerted), and form submission is cancelled. The error msg is initially hidden and it should be made visible only when a field is left empty.

PROBLEM: the code to stop submission is not working. Please post any error. It works if use only alert(), and remove the code to show and delete hidden validaeFormOnSubmit() and validateEmpty().

FORM:

<form action="start.php" method="post" onsubmit="return validateFormOnSubmit(this)" >
<table>
  <tbody>
  <tr>
     <td><label for="fname">Team Name:</label><br></td>
    <td><input name="fname"  type="text" autocomplete="off">&nbsp <div id="1"> Field is 
required 
</div></td>
  </tr>   
  <tr>
 <td><label for="contact">Contact 1 :</label> </td>
 <td><input type="text"  maxlength = "10" name="contact" > &nbsp<div id="2"> Field 
 is required </div></td>
  </tr>   
  <tr>
    <td><label for="contact2">Contact 2:</label> </td>
    <td><input type="text"  maxlength = "10" name="contact2" >&nbsp <div id="3"> Field is     
    required </div></td>
  </tr>  
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>
</form>

SCRIPT

<script >
$(document).ready(function () {
            var i;
            for(i=1;i<=3;i++)
                {
                var k='#'+i;
                $(k).hide();}

            });

function validateFormOnSubmit(theForm) {
    var reason = "";

   reason += validateEmpty(theForm.fname,1);
   reason += validateEmpty(theForm.contact,2);
   reason += validateEmpty(theForm.contact2,3);

  if (reason != "") {

    return false;
  }
  return true;
  }

  function validateEmpty(fld,k) {
    var error = "";

    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "error";
        var k='#'+i;
        $(k).show();
    } else {
        fld.style.background = 'White';
        var k='#'+i;
            $(k).hide();
        }
        return error;  
    }
    </script>

Answer 1

I would suggest the following:

• Remove the onsubmit="..." from your HTML

• Bind to the onsubmit event programmatically:

   $(...).on("submit", validateFormOnSubmit); 

• Change the signature of validateFormOnSubmit accordingly:

   function validateFormOnSubmit(event) { // use this instead of theForm } 

• Instead of returning false do event.preventDefault() , ie:

   if (reason != "") { event.preventDefault(); } 

Answer 2

What about this ? http://jsfiddle.net/45Kfy/

<code>
  $(document).ready(function () {
               $("input").each(function(index, item)
               {
                   if ($(item).val().length == 0)
                   {
                      $(item).css("background-color", "red");
                   }
               });
           });
 </code>

Instead of documentReady() you should trigger the button click. ( jQuery get the input value in an .each loop ) And watch out, your button is an inputfield too.