how to not submit a form in js

Question

I want to not submit the form if the inputs are empty, here is my code:

 <html>
<head>
<title>
The X/O Game
</title>
<script type="text/javascript">
var check = function () {
    var x = document.getElementById("x").value;
    var o = document.getElementById("o").value;
    var p = document.getElementById("p").value;

    if(p==""||(x==""&&o=="")){
        alert("fill the form!");
        return false;
    }

    return true;
};

$('#formm').submit(function(e){
    var shouldSubmit = check();

    if (!shouldSubmit) {
        e.preventDefault();
    }                                    
});

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});
</script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<body>
<div>
Please enter your name & choose your character before start playing:
</div>
<div>
<form method=post action=game.php name="formm">
Name:<br>
<input type=text name=player id=p>
</div>
<div>
Character:<br>
<input 
  type="radio" name="emotion" value="xChar"
  id="x" class="input-hidden" />
<label for="x">
  <img src="images/x.png " />
</label>
<input 
  type="radio" name="emotion" value="oChar"
  id="o" class="input-hidden" />
<label for="o">
  <img src="images/o.png" />
</label>
</div>
<div>
<input type=submit value=Play>
</form>
</div>
</body>
</html>

    $('#formm').submit(function(){
        return  f;                                       
    });

this function is called when the user clicks on the submit button. the form is subbmited even though the inputs are empty, where is the wrong?

Try to not change the question, then you will falsify answers — Anders Lindén
– Anders Lindén, Commented Nov 22, 2013 at 19:29

epascarello · Accepted Answer · 2013-11-22 19:25:33Z

1

f is defined when you call check(), they will not magically update. Do the checks inside the submit function.

answered Nov 22, 2013 at 19:25

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

Jan Turoň · Accepted Answer · 2013-11-22 19:36:16Z

1

You'd better use HTML5 required attribute here:

<form>
  <input type="text" name="x" required>
  <input type="submit">
</form>

If you want more complex validation, you should have a look at html5rocks.com. The form validation should move from Javascript to HTML now (or in the near future).

But if you want to do it your way, do as epascarello suggests here:

$('#formm').submit(function(){
    check();
    return  f;                                       
});

edited Nov 22, 2013 at 19:36

answered Nov 22, 2013 at 19:28

Jan Turoň

33.1k24 gold badges139 silver badges179 bronze badges

1 Comment

jbabey Over a year ago

This is a great suggestion, though his logic appears to be a little more verbose than just required (p==""||(x==""&&o==""))

digiliooo · Accepted Answer · 2013-11-22 19:27:58Z

0

Try this:

$('#yoursubmitbtnid').click(function(){
    var x = document.getElementById("x").value;
    var o = document.getElementById("o").value;
    var p = document.getElementById("p").value;

    if(p==""||(x=="" && o=="")){
        alert("fill the form!");
        return false;
    }                                     
});

answered Nov 22, 2013 at 19:27

digiliooo

8417 silver badges9 bronze badges

1 Comment

jbabey Over a year ago

be careful not to return false when you mean to just stop the event default behavior. this will break bubbling and event delegation.

jbabey · Accepted Answer · 2013-11-22 19:28:20Z

0

You need to run the check function in the submit handler to determine whether or not the submit should be allowed.

var check = function () {
    var x = document.getElementById("x").value;
    var o = document.getElementById("o").value;
    var p = document.getElementById("p").value;

    if(p==""||(x==""&&o=="")){
        alert("fill the form!");
        return false;
    }

    return true;
};

$('#formm').submit(function(e){
    var shouldSubmit = check();

    if (!shouldSubmit) {
        e.preventDefault();
    }                                    
});

You may want to look into using a validation plugin (such as this) if you plan on doing any extensive client side validation.

answered Nov 22, 2013 at 19:28

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

2 Comments

user2996426 Over a year ago

it seems as the most suitable answer, but its not working either :( , i'll post the all code of my page.

jbabey Over a year ago

@user2996426 you're binding event handlers to elements before they exist. HTML in parsed only once from top to bottom. Put your jquery code inside of a $(document).ready() or move it to the bottom of the body tag.

NyronW · Accepted Answer · 2013-11-22 19:31:32Z

0

You need to call the check function when the form is being submitted

$('#formm').submit(function(){
    return check();                                       
});

If the check function returns false then the form should not submit.

answered Nov 22, 2013 at 19:31

NyronW

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

how to not submit a form in js

5 Answers 5

Comments

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related