Javascript 单击提交按钮，检查输入是否为空_Javascript

Javascript 单击提交按钮，检查输入是否为空

javascript

Javascript 单击提交按钮，检查输入是否为空,javascript,Javascript,我已经搜索并尝试了几乎所有的东西，但没有任何效果。我只是想让这一切发生：单击“提交”按钮-->检查文本字段是否为空-->如果为空，则发出错误警报，不要进入下一页（如果不是，则仅当值在0到100之间时才进入）以下是我现在得到的代码（我发现其他代码也可以使用）：功能手柄更改（输入）{ 如果（输入值100）警报（“值应在0-100之间”）； } 上面的代码工作正常，如果有人在字段中键入了一些内容，并且这些内容不在0到100之间，那么它将发出警报并出错，而不会推进页面但是，如果没有人键入任何

我已经搜索并尝试了几乎所有的东西，但没有任何效果。我只是想让这一切发生：

单击“提交”按钮-->检查文本字段是否为空-->如果为空，则发出错误警报，不要进入下一页（如果不是，则仅当值在0到100之间时才进入）

以下是我现在得到的代码（我发现其他代码也可以使用）：


功能手柄更改（输入）{
如果（输入值<0）警报（“值应在0-100之间”）；
如果（input.value>100）警报（“值应在0-100之间”）；
}

上面的代码工作正常，如果有人在字段中键入了一些内容，并且这些内容不在0到100之间，那么它将发出警报并出错，而不会推进页面

但是，如果没有人键入任何内容，他们可以单击submit按钮并推进页面，而上面的代码并没有阻止这一点。因此，我尝试使用以下方法（许多尝试中的一种）：


函数checkField（）{
var x=document.getElementById（“AgencyField”）；
如果（var x=”“）{
警报（“值应在0-100之间”）；
返回false；
}否则{
返回true；
}

上面的代码失败了，他们只需单击submit按钮即可前进，而无需在字段中键入任何内容

任何帮助都将不胜感激

-----------编辑-----------------

根据每个人的评论，我已经重写了我的代码，非常接近。但我没有得到以下信息：

当我输入数字>100时，它会提醒消息，不会前进。

当我将其留空时，它会提醒消息并前进。

为什么会有差异？

<form name="agencytrial">
    <div class="textcenter">
        <input name="AgencyRating" id="AgencyField" type="text" value=""   autocomplete="off" class="forceNumeric" onchange="handleChange(this)"/>
        <input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="handleChange()">
    </div>
</form>

<script>
  function handleChange(input){
  var x = document.getElementById("AgencyField").value;
    if (x < 0 || x > 100 || x === "") alert("Value should be between 0 - 100");
    }
</script>


功能手柄更改（输入）{
var x=document.getElementById（“AgencyField”）.value；
如果（x<0 | | x>100 | | x==”）警报（“值应在0-100之间”）；
}

----编辑#2----

下面是我的全部代码。我现在只使用“form onsubmit”和“onclick”代码，因为onchange代码不会阻止键或按钮在表单为空时被单击（即，从不修改）

我已经弹出了一个警报，或者点击了按钮，但是页面总是在我关闭警报后前进

<?php
    $compTime = 8;                  // time in seconds to use for 'computer' timing
    if ($text === '') { $text = 'How likely was it that you caused the tone to occur?|Type your response on a scale from 0-100.'; }
    $texts = explode('|', $text);
    $mainText = array_shift($texts);
?>
<!DOCTYPE html>
<html>
<form onsubmit="return handleChange();">
    <div class="textcenter">
        <h3><?php echo $mainText; ?></h3>
        <?php
            foreach ($texts as $t) {
                echo '<p>' . $t . '</p>';
            }
        ?>
    </div>

    <div class="textcenter">
        <input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric"/>
        <input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="return handleChange()"/>
    </div>
</form>

<style type="text/css">
img {
    display: block;
    position: relative;
    bottom: -40px;
    left: -21px;
    max-width:520px;
    max-height:520px;
    width: auto;
    height: auto;
}
</style>

<body>
<img src="/tapa/Experiment/images/scale.jpg"</img>
</body>
</html>


<script type="text/javascript">
function handleChange(input) {
    var x = document.getElementById("AgencyField").value;
    if (x === "" || x < 0 || x > 100) {
        alert("Value should be between 0 - 100");
        return false;
    }
   return true;
}
</script>


img{
显示：块；
位置：相对位置；
底部：-40px；
左：-21px；
最大宽度：520px；
最大高度：520像素；
宽度：自动；
高度：自动；
}
功能手柄更改（输入）{
var x=document.getElementById（“AgencyField”）.value；
如果（x==“”| | x<0 | | x>100）{
警报（“值应在0-100之间”）；
返回false；
}
返回true；
}

*****编辑*****

我已经用一个新脚本解决了这个问题。多亏了大家，提供的解决方案通常都会起作用，但在我的情况下，原因并不完全清楚，但不值得解释。

尝试以下方法：

<script>
    function handleChange(input) {
        if (input.value < 0 || input.value > 100 || isNaN(input.value)) {
           alert("Value should be between 0 - 100");
        }
    }
</script>


功能手柄更改（输入）{
if（input.value<0 | | input.value>100 | | isNaN（input.value））{
警报（“值应在0-100之间”）；
}
}

原因：

是一个Javascript函数，如果给定参数是一个数字，则返回该函数。如果该参数小于0或大于100或不是一个数字，则会显示消息！

更新的问题：

当我输入number>100时，它会提醒消息，并且不会前进

当您输入一个数字>

并单击

submit

，它将触发

onchange

。它甚至不会触发submit按钮

当我将其留空时，它会提醒消息并前进

它前进是因为您没有告诉它不要这样做。为此，您必须在

onclick

事件上返回

false

（请参阅下面的修复）

修正：将

return

添加到

表单提交按钮的onclick
：
<input class="button" id="FormSubmitButton" type="submit"
                                            value="Submit" onclick="return handleChange()">
                                                                    ^^^^^^-- add this

检查

原始问题
几个问题：
var x = document.getElementById("AgencyField");

这样，x只获取对#AgencyField
元素的引用。如果不需要，则需要它的值：var x=document.getElementById（“AgencyField”）.value；

此外，您正在if
中执行作业，而不是比较：
if (var x = ""){

如果（x==“”）{

，则此行应为


您的函数checkField（）{
也缺少结尾}

最重要也是最微妙的是：
<input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="checkField()"; />

总之，请检查更新的。还有更多更改，它们都显示在下面（注释中）
固定JavaScript：
function handleChange(input) {
    if (input.value.length < 0) { // added .length
        alert("Value should be between 0 - 100");
        return false; // added this
    }
    if (input.value.length > 100-1) { // added .length AND added -1
        alert("Value should be between 0 - 100");
        return false; // added this
    }
    return true; // added this
}

function checkField() {
    var x = document.getElementById("AgencyField").value; // added .value
    if (x === "") { // if (var x = "") -> if (x === "")
        alert("Value should be between 0 - 100");
        return false;
    } else {
        return true;
    }
} // added this }

功能手柄更改（输入）{
如果（input.value.length<0）{//added.length
警报（“值应在0-100之间”）；
return false；//添加了这个
}
如果（input.value.length>100-1）{//added.length和added-1
警报（“值应在0-100之间”）；
return false；//添加了这个
}
return true；//添加了这个
}
函数checkField（）{
var x=document.getElementById（“AgencyField”）.value；//added.value
if（x==“”）{//if（var x=”“）->if（x==“”）
警报（“值应在0-100之间”）；
返回false；
}否则{
返回true；
}
}//添加了这个}

固定HTML：
<form name="agencytrial">
    <div class="textcenter">
        <input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric" onkeypress="return handleChange(this)" ; />
        <input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="return checkField()" />
    </div>
</form>
<!-- Changes to HTML elements:
#FormSubmitButton
- removed ; at the end
- added return to onclick
#AgencyField
- changed onchange to onkeypress
- added return
-->

您应该使用===符号（而不是“=”符号）。现在您正在有条件地将x设置为等于空字符串，而不是检查值是否存在
if (var x = ""){

但看起来应该是这样的
if (x === ""){

请尝试提交处理程序：

var validate=函数（表单）{
var agency=+（form.AgencyField.value）| |“”；
如果（！代理）{
警报（“机构必须使用数字！”）；
返回false；
}else if（0>机构| | 100<机构）{
警署必须
function handleChange(input) {
    if (input.value.length < 0) { // added .length
        alert("Value should be between 0 - 100");
        return false; // added this
    }
    if (input.value.length > 100-1) { // added .length AND added -1
        alert("Value should be between 0 - 100");
        return false; // added this
    }
    return true; // added this
}

function checkField() {
    var x = document.getElementById("AgencyField").value; // added .value
    if (x === "") { // if (var x = "") -> if (x === "")
        alert("Value should be between 0 - 100");
        return false;
    } else {
        return true;
    }
} // added this }

<form name="agencytrial">
    <div class="textcenter">
        <input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric" onkeypress="return handleChange(this)" ; />
        <input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="return checkField()" />
    </div>
</form>
<!-- Changes to HTML elements:
#FormSubmitButton
- removed ; at the end
- added return to onclick
#AgencyField
- changed onchange to onkeypress
- added return
-->

if (var x = ""){

if (x === ""){

            <form name="agencytrial" onsubmit="return checkField()">
            <div class="textcenter">
                <input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric" onchange="handleChange(this)">
                <input class="button" id="FormSubmitButton" type="submit" value="Submit">
            </div>
            </form>

            <script>
            function handleChange(input) {
              if (!(parseInt(input.value) >= 0 && parseInt(input.value) <= 100)) alert("Value should be between 0 - 100");
            }
            function checkField(){
              var input = document.getElementById("AgencyField");

              if (!(parseInt(input.value) >= 0 && parseInt(input.value) <= 100)) {
                alert("Value should be between 0 - 100")
                return false
              }
              return true
            }
            </script>