JavaScript验证提交按钮

想要使用JavaScript验证工作，当我点击提交按钮。现在发生的事情是，即使我输入值低的值提交。但我需要检查验证之前，我点击提交...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函数，所以当我输入提交它不会工作，因为我输入了一个较低的值。

来源

2014-11-17 m ali

使用按钮而不是提交 – Edrich

@Edrich：如果你想提交一个'form'，使用提交按钮。 – Amberlamps

@Amberlamps你可以使用jQuery提交按钮。 – Edrich

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>

来源

2014-11-17 09:39:15

复制和粘贴并不会帮助某人理解，让某人帮助你解决问题的关键在于理解手中的问题并学习如何解决问题，而不是只是复制/粘贴。大量的免费源代码。 – NewToJS

我想要的是，当我点击提交阅读必须高于现有阅读。此刻，如果它降低它仍然提交的形式，但我不想要要发生，我想javascript错误显示，如果价值较低，当我点击提交按钮 –

@NewToJS我认为这是相当简单的理解..anyway更新我的答案，使其更清晰.. –

您实际上并不想验证submit按钮，因为还有其他方式可以提交表单。您实际上需要验证表单的onsubmit处理程序。

现在，这就是说，你没有显示足够的代码来知道问题出在哪里，但我可以很好地猜测。

这一行之前：

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

加入这一行：

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

有你想的DOM已经呈现之前运行这段代码的好机会。如果返回0，你有三种选择：

使用事件代表团（矫枉过正在这种情况下）
移动一个$(function() {...});块
负载中的代码脚本在页面的底部。

来源

2014-11-17 09:38:21

我想要的是，当我点击提交时，读数必须高于现有读数。目前，如果它的下面它仍然提交表单，但我不希望发生这种情况，我希望javascript错误显示，如果价值较低，当我点击提交按钮 –

我有一个轻微的哎呀，我的意思是'onsubmit'' - 不是'submit'。固定。如果用户使用'submit'按钮，或者按下ENTER键提交表单，那么仍会触发。 –

这使情况变得更糟，当我点击按钮时，出现警告（1）。然后当我点击提交它不工作，并在代码中出错。我只是不想用户继续，直到消息已经消失 –

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

来源

2014-11-17 09:45:11

JavaScript验证提交按钮

回答

相关问题