修正：

Question

我已经搜索过几乎所有事情并且没有任何作用。我只是想让这件事发生：

点击提交按钮 - ＆gt;检查文本字段是否为空 - ＆gt;如果是，则提醒错误并且不要前进到下一页（如果没有，则前进，但仅当数值在0到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="checkField()";  />
    </div>
</form>

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

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

但如果没有人输入任何内容，他们只需点击提交按钮并推进页面，上面的代码就无法阻止它。所以我尝试使用类似下面的内容（多次尝试之一）：

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

上面的代码失败了，他们只需点击提交按钮即可前进而无需在字段中输入任何内容。

任何帮助都将受到重视！

------------ EDIT --------------

根据每个人的评论，我重写了我的代码并且它非常接近。但是这里我不知道：

当我输入数字＆gt; 100，它提醒消息并且不提前。

当我将其留空时，会提醒消息和ADVANCES。

为什么会有差异？

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

-------编辑＃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>

***** EDIT *****

我使用新脚本解决了这个问题。感谢所有人，所提供的解决方案通常都有效，但不是因为我不完全清楚但不值得解释的理由。

Answer 1

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

if (var x = ""){

但它应该看起来像

if (x === ""){

Answer 2

更新了问题：

当我输入数字＆gt; 100，它提醒消息并且不提前。

输入数字＆gt; 100并点击submit，它会触发onchange。它甚至不会触发提交按钮。

当我将其留空时，会提醒消息和ADVANCES。

它前进是因为你没有告诉它不要。为此，您必须在false事件上返回onclick（请参阅下面的修复）。

修正：

将return添加到#FormSubmitButton＆＃39; onclick：

<input class="button" id="FormSubmitButton" type="submit"
                                            value="Submit" onclick="return handleChange()">
                                                                    ^^^^^^-- add this

将return添加到JavaScript函数：

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

检查updated demo fiddle here。

原始问题

几个问题：

var x = document.getElementById("AgencyField");

这样，x只获得对#AgencyField元素的引用。你不想要它，你想要它的价值：var x = document.getElementById("AgencyField").value;

此外，您正在if进行作业，而不是比较：

if (var x = ""){

此行应为if (x === ""){。

您的function checkField() {也缺少结尾}。

最重要的，也是最微妙的是：

<input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="checkField()"; />

你应该有一个return（同时删除;）：

<input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="return checkField()"/>

总而言之，请检查已更新 working fiddle here。还有更多更改，它们都显示在下面（在评论中）。

修正了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 }

修正了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
-->

Answer 3

试试这个：

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

为什么：

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

Answer 4

尝试onsubmit处理程序：

var validate = function(form) {
  var agency = +(form.AgencyField.value) || '';
  if (!agency) {
    alert('Agency has to numeric !');
    return false;
  } else if (0 > agency || 100 < agency) {
    alert('Agency must be between 0 - 100');
    return false;
  } else {
    return true;
  }
};

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

Answer 5

这是我的解决方案。

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

我使用onsubmit代替onclick。
onsubmit必须返回false。
parseInt可以轻松验证。

度过愉快的一天。

onclick提交按钮，检查输入是否为空

5 个答案:

修正：

原始问题