提交按钮上的javascript验证

我想在单击submit按钮时使用javascript验证。现在发生的情况是，即使我输入了一个较低的值，该值也会提交。但我需要在单击提交之前检查验证

这是Javascript：

$(function () {
   $("#newMonoReading").on('focusout', function () {
       var str = "";

        var initialMonoReading = $('#InitialMonoReading').val();
        var newMonoReading = $('#newMonoReading').val()
        if (~~newMonoReading < ~~initialMonoReading) {
            $('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
            $('#MonoErrorMessage').show();
        } else {
            $('#MonoErrorMessage').hide();
        }
    });
});

$（函数（）{
$（“#newMonoReading”）.on（'focusout'，function（）{
var str=“”；
var initialMonoReading=$（'#initialMonoReading'）.val（）；
var newmonoreding=$（'#newmonoreding'）.val（）
如果（~~newMonoReading<~~initialMonoReading）{
$（“#MonoErrorMessage”）。文本（“新的Mono读数必须大于现有读数”）；
$（'#MonoErrorMessage'）.show（）；
}否则{
$（'#MonoErrorMessage'）.hide（）；
}
});
});

现在在我的表单上，您可以看到输入类型（提交）

取消

---

如何将JavaScript函数添加到submit按钮，这样当我输入submit时，它将无法工作，因为我输入了一个较低的值。

您实际上不希望在

submit

按钮上进行验证，因为还有其他提交表单的方法。实际上，您需要验证表单的

onsubmit

处理程序

现在，也就是说，您还没有展示足够的代码来了解问题所在，但我可以很好地猜测

在这一行之前：

$("#newMonoReading").on('focusout', function () {

alert($("#newMonoReading").length);

添加此行：

$("#newMonoReading").on('focusout', function () {

alert($("#newMonoReading").length);

很有可能在呈现DOM之前尝试运行此代码。如果返回

0

，则有三种选择：

• 使用事件委托（在这种情况下，过度使用）
• 将代码移到

  $（function（）{…}）中块

• 加载页面底部的脚本

函数validateForm（）{
var str=“”；
var initialMonoReading=$（'#initialMonoReading'）.val（）；
var newmonoreding=$（'#newmonoreding'）.val（）；
如果（~~newMonoReading<~~initialMonoReading）{
$（“#MonoErrorMessage”）。文本（“新的Mono读数必须大于现有读数”）；
$（'#MonoErrorMessage'）.show（）；
返回false；
}否则{
$（'#MonoErrorMessage'）.hide（）；
}
}

这个例子可以澄清问题

取消

将提交按钮更改为 这样，您就可以完全控制提交。您可以在

validate（）

函数中执行自己的逻辑，并决定是否允许表单提交

<input type="button" onclick="validate()" value="Submit New Readings" class="btn btn-primary">

您的验证函数将是

function validate () {
   var initialMonoReading = $('#InitialMonoReading').val();
   var newMonoReading = $('#newMonoReading').val()
   if (~~newMonoReading < ~~initialMonoReading) 
  {
     alert("Value is not valid");
     return;
  }
  ///else submit
   $("yourform").submit();
});

函数验证（）{
var initialMonoReading=$（'#initialMonoReading'）.val（）；
var newmonoreding=$（'#newmonoreding'）.val（）
如果（~~newMonoReading<~~initialMonoReading）
{
警报（“值无效”）；
返回；
}
///否则提交
$（“您的表单”）.submit（）；
});

使用按钮而不是submit@Edrich：如果您想提交

表单

，请使用提交按钮。@Amberlamps您可以使用jquery提交按钮。复制和粘贴不会帮助他人理解。让别人帮你解决问题的意义在于理解手头的问题并学会如何解决它，而不仅仅是复制/粘贴。我想要的是，当我点击提交时，阅读资料必须高于现有的阅读资料。目前，如果它的值较低，它仍然提交表单，但我不希望发生这种情况，我希望javascript错误显示当我单击submit时值是否较低button@NewToJS我认为这很容易理解。无论如何，我更新了我的答案，让它更清楚。@mali请尝试此代码并让我知道。。我确信你检查initialmonoreading的代码是否正确。。它会像你想象的那样工作，因为你知道如何修复它。对于那些没有使用过这种方法的人来说，他们不会理解它。有时，你必须清楚地解释消息来源在做什么，而不是假设每个人都和你有相同的知识。我不想表现得很糟糕，但这是真的。我想要的是，当我点击提交时，阅读资料必须高于现有的阅读资料。目前，如果它的值较低，它仍然提交表单，但我不希望发生这种情况，我希望javascript错误显示当我单击submit按钮时，值是否较低。我的意思是，

onsubmit

”——而不是

submit

。固定的。如果用户使用

submit

按钮，或按ENTER键提交表单，仍会触发该事件。这使得情况更糟，当我单击该按钮时，会出现一个警报（1）。然后，当我点击submit时，它不起作用，并在代码中给出错误。我只是不想让用户继续，直到消息发出。。警报（1）表示元素确实存在——这就是我们需要检查的内容。我会在几分钟后删除这个答案。

function validate () {
   var initialMonoReading = $('#InitialMonoReading').val();
   var newMonoReading = $('#newMonoReading').val()
   if (~~newMonoReading < ~~initialMonoReading) 
  {
     alert("Value is not valid");
     return;
  }
  ///else submit
   $("yourform").submit();
});