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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15953988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 02:43:16  来源:igfitidea点击:

preventing form from submitting when input field is empty

javascript

提问by Pawan

when no value is provided to the 'roll' input field an alert is produced by the 'empty()' function but this empty value is still passed to 'retrive.php' so how to stop this from happening and only pass value to 'retrive'.php when some input value is provided.

当“roll”输入字段没有提供值时,“empty()”函数会产生一个警报,但这个空值仍然传递给“retrive.php”,所以如何阻止这种情况发生,只将值传递给“当提供一些输入值时检索'.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>

回答by j08691

You need to return false to cancel the submit.

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

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

and

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

jsFiddle example

jsFiddle 示例

回答by wecky

How about using the required attribute?

如何使用 required 属性?

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

Only works in html5 though.

虽然只适用于 html5。

回答by Amir Md Amiruzzaman

<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>

回答by Yitzhak Weinberg

i use with this I thinking it's maybe can help

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

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

or work with class or ID like this

或者像这样使用类或 ID

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

回答by Artem Chirkov

The easiest way is to add attribute "required" into the input tag

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

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

回答by gabriel alejandro Rodriguez

If you want to save code you can simply do:

如果您想保存代码,您可以简单地执行以下操作:

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

I just say.

我只是说。