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();
});

提交按钮上的javascript验证

3 个答案: