输入字段为空时阻止表单提交答案

【问题标题】：Preventing form submission when input field is empty输入字段为空时阻止表单提交
【发布时间】：2013-04-11 16:24:10
【问题描述】：

当没有为roll 输入字段提供值时，empty() 函数会生成警报，但此空值仍会传递给retrive.php。那么我怎样才能阻止这种情况的发生，只在提供一些输入值时才将值传递给retrive.php？

<html>
 <head>
   <title>STUDENT FORM</title>
    <script type="text/javascript">
        function empty()
        {
          var x;
          x = document.getElementById("roll-input").value;
          if (x == "") 
           { 
              alert("Enter a Valid Roll Number");
           };
        }
    </script>
</head>
 <body >
  <h1 align="center">student details</h1>       
    <div id="input">
      <form action='retrive.php' method='get'>
       <fieldset>
        <legend>Get Details</legend>
          <dl>
            <dt><label for="roll-input">Enter Roll Number</label></dt>
        <dd><input type="text" name="roll" id="roll-input"><dd>
            <input type="submit" value="submit" onClick="empty()" />
          </dl>
        </fieldset>
      </form>
    </div>  
  </body>
</html>

【问题讨论】：

标签： javascript html forms

【解决方案1】：

取消提交需要返回false。

function empty() {
    var x;
    x = document.getElementById("roll-input").value;
    if (x == "") {
        alert("Enter a Valid Roll Number");
        return false;
    };
}

和

<input type="submit" value="submit" onClick="return empty()" />

jsFiddle example

【讨论】：

【解决方案2】：

使用 required 属性怎么样？

<input id="Name" name="Name" class="form-control" placeholder="Enter name" type="text" required/>

但仅适用于 html5。

【讨论】：

【解决方案3】：

最简单的方法是在输入标签中添加属性“required”

<input type="text" name="name" required>

【讨论】：

【解决方案4】：

<form method="post" name="loginForm" id ="loginForm" action="login.php">
<input type="text" name="uid" id="uid" />
<input type="password" name="pass"  id="pass" />
<input type="submit" class="button" value="Log In"/>
<script type="text/javascript">

$('#loginForm').submit(function() 
{
    if ($.trim($("#uid").val()) === "" || $.trim($("#pass").val()) === "") {
        alert('Please enter Username and Password.');
    return false;
    }
});

</script>
</form>

【讨论】：

【解决方案5】：

我用这个我认为它可能会有所帮助

  $(function () {
        $('form').submit(function () {
            if ($('input').val() === "") {
                alert('Please enter Username and Password.');
                return false;
            }
        });
    })

或者像这样使用类或 ID

$('.inputClass')
$('#inputID')

【讨论】：

【解决方案6】：

如果你想保存代码，你可以这样做：

<input type="text" name="roll" id="roll-input">
<input type="submit" value="submit" onClick="return document.getElementById('roll-input').value !=''"/>

我只是说。

【讨论】：