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>

My script was wrong if (fld.value.length == 0) { fld.style.background = 'Yellow'; error='#'+k; //here should've use k rather than i $(error).show(); // here should've use error rather than k } else { fld.style.background = 'White'; error='#'+k; //here should've use k rather than i $(error).hide(); // here should've use error rather than k } return error; } — user2692256, Sep 30 '13 at 14:01

score 1 · Accepted Answer · answered Sep 30 '13 at 14:00

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(), i.e.:
```
if (reason != "") {
    event.preventDefault();
}
```

score 0 · Answer 2 · edited May 23 '17 at 12:13

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.

Form submission cancel using javascript not working

2 Answers2