Html.BeginForm使用onSubmit进行验证

时间:2014-11-17 10:44:46

标签: jquery .net asp.net-mvc

我试图提交我的表单,但是我添加了一些用于验证的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()" }))
        {

任何想法

4 个答案:

答案 0 :(得分:15)

如果我是正确的,那么在提交时你想要用你的jquery函数来验证你的表单..如果传递了vailidation,那么你希望提交被设置为contineued,否则你想要取消提交..如果我错了那么请多整理一下你的问题。

否则,您可以将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)" }))

虽然,我没有检查你的代码,但这应该有用..请试一试,让我们知道..

答案 1 :(得分:5)

这对我有用

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">
}

答案 2 :(得分:2)

这对我有用,

@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>

答案 3 :(得分:1)

尝试以这种方式使用它:

  <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">