提交按钮上的javascript验证

Question

当我单击提交按钮时，要使用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();
        }
    });
});

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

<div class="modal-footer">
<input type="submit" value="Submit New Readings" class="btn btn-primary">

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>

我如何将JavaScript函数传递到“提交”按钮，所以当我输入“提交”时，它将无法正常工作，因为我输入的值太低。

Answer 1

function validateForm() {
   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();
        return false;
    } else {
        $('#MonoErrorMessage').hide();
    }
}

这个例子将清除FIDDLE

    <form onsubmit="return validateForm()" method="post">
    <div class="modal-footer">
    <input type="submit"  value="Submit New Readings" class="btn btn-primary">

    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
    </fieldset>
    </form>

Answer 2

实际上，您不希望在“ submit按钮上进行验证，因为还有其他提交表单的方法。 您实际上希望验证表单的onsubmit处理程序。

就是说，您还没有显示足够的代码来知道问题出在哪里，但是我可以作一个很好的猜测。

在此行之前：

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

添加此行：

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

您很有可能在呈现DOM之前尝试运行此代码。 如果返回0 ，则有三个选择：

• 使用事件委派（在这种情况下过度杀伤）
• 将代码移到$(function() {...}); 块
• 在页面底部加载脚本。

Answer 3

将提交按钮更改为按钮这样，您将完全控制提交。 您可以在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();
});