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

Paw*_*wan 13 javascript

当没有为'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>
Run Code Online (Sandbox Code Playgroud)

j08*_*691 32

您需要返回false才能取消提交.

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

<input type="submit" value="submit" onClick="return empty()" />
Run Code Online (Sandbox Code Playgroud)

jsFiddle例子


Art*_*kov 7

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

<input type="text" name="name" required>
Run Code Online (Sandbox Code Playgroud)


wec*_*cky 5

如何使用必填属性?

<input id="Name" name="Name" class="form-control" placeholder="Enter name" type="text" required/>
Run Code Online (Sandbox Code Playgroud)

不过仅适用于html5。