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
– user2692256, Commented Sep 30, 2013 at 14:01

Nikos Paraskevopoulos · Accepted Answer · 2013-09-30 14:00:07Z

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

answered Sep 30, 2013 at 14:00

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:13:05Z

0

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.

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Sep 30, 2013 at 13:55

LaMiy

1137 bronze badges

Collectives™ on Stack Overflow

Form submission cancel using javascript not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related