Html.BeginForm 使用 onSubmit 进行验证答案

【问题标题】：Html.BeginForm using onSubmit to validateHtml.BeginForm 使用 onSubmit 进行验证
【发布时间】：2014-11-17 10:44:45
【问题描述】：

我正在尝试提交我的表单，但是我添加了一些用于验证的 jquery：

    $(function validateForm() {
    $("#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();
            return false;


        } else {
            $('#MonoErrorMessage').hide();

        }
    });
});

但问题出在提交按钮上

  <input type="submit" value="Submit" class="btn btn-primary">

如果有错误提交按钮仍然有效，我需要它显示没有错误消息然后发送，但我尝试使用表单的 onsubmit 但它不起作用，它仍然提交即使值较小并且错误信息正在显示。

这是 html.BeginForm。我认为错误可能在这里。不太确定。

         <div class="modal-body">
        @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm()" }))
        {

任何想法

【问题讨论】：

您需要处理submit 事件，执行验证，如果出现错误则取消它，但您可以只使用foolproof [GreaterThan] 属性

标签： jquery .net asp.net-mvc

【解决方案1】：

这是一个正确的总结吗？

在提交时，您想使用 jQuery 函数验证您的表单。如果验证通过，则您希望继续提交，否则您希望取消提交。

如果我的总结不正确，请进一步澄清您的问题。

如果我总结的准确，你可以把你的jQuery函数改成：

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

在创建标记时，请使用以下行：

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm(event)" }))

【讨论】：

我这样做了，但现在它给了我一个代码错误，说“未被用户代码处理”但我希望它留在显示错误消息的表单上
好的，这是不可能的.. event.preventDefault();永远不会让表单提交。你能发出警报吗（“你好，验证失败..！！”）；就在 event.preventDefault(); 之后和另一个警报（“你好，验证成功..！！”）；就在 $('#MonoErrorMessage').hide(); 之后
告诉我们，弹出的是哪一个？？
你为什么用“~~”，我没用过这个
好的，当我在谷歌浏览器上尝试时它不起作用，但在 ie 上，它给了我错误。它不喜欢 event.preventDefault();

【解决方案2】：

这对我有用

function validateForm() {
    if ($('#newMonoReading').val() == 'bla bla bla') {
        alert('bla bla bla');
        return false;
    }

    else {
        form1.submit();
    }


@using (Html.BeginForm("action", "controller", FormMethod.Post, new { @id = "form1"}))
{
<input type="text" id="newMonoReading"><br>
<input type="submit" value="Submit" onclick = "return validateForm();" class="btn btn-primary">
}

【讨论】：

【解决方案3】：

这对我有用，

@using (Html.BeginForm("Tag", "Translations",  FormMethod.Get, new { enctype = "multipart/form-data", onsubmit = "return validateTagInput()" }))

jQuery，

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script>
     function validateTagInput() 
        {
        //do validation
        if (x,y,z)
        {
        return true; //let page be submitted
        }
        else {
        return false; //do not let submission go through
             }
        }
 </script>

【讨论】：

【解决方案4】：

尝试以这种方式使用它：

  <div class="modal-body">
        @using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { enctype = "multipart/form-data"}))
        {

 <input type="submit" value="Submit" onclick="return validateForm()" class="btn btn-primary">

【讨论】：

@m ali：请检查我编辑的代码。这是工作。我已经验证过了。