问题描述:

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?

网友答案:

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

网友答案:

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;                                       
});
网友答案:

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;
    }                                     
});
网友答案:

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.

网友答案:

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.

相关阅读:
Top