Question

如果输入为空，我想不提交表单，这是我的代码：

 <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;                                       
    });

当用户单击提交按钮时，将调用此函数。即使输入为空，表单也是subbmited，哪里出错了？

Answer 1

当您致电f时，会定义

check()，他们不会神奇地更新。在提交功能中进行检查。

Answer 2

您最好在此处使用HTML5 required属性：

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

如果您想要更复杂的验证，请查看html5rocks.com。表单验证现在应该从Javascript移动到HTML（或在不久的将来）。

但是如果你想按自己的方式去做，就像epascarello在这里所说的那样：

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

Answer 3

试试这个：

$('#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;
    }                                     
});

Answer 4

您需要在提交处理程序中运行检查功能，以确定是否允许提交。

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();
    }                                    
});

如果您计划进行任何广泛的客户端验证，您可能需要考虑使用验证插件（例如this）。

Answer 5

您需要在提交表单时调用check函数

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

如果check函数返回false，则表单不应提交。

如何在js中提交表格

5 个答案: