mvc4 ajax jQuery html5表单验证C＃

Question

如何显示对加载了ajax jQuery的html5表单的验证，并且信息通过ajax发布发送到服务器？ 我有一条错误消息，指出何时出现问题； 这只是一般信息。 但是，当某些信息输入错误或其他信息时，我想显示。

这是我的代码：

<form name="cnt_us-frm" id="cnt_us-frm" method="post" action="@Url.Action("Submit")">
<table>
    <tr>
        <td>
            <label for="fname">First name*: </label>
        </td>
        <td>
            <input type="text" name="fname" id="fname" tabindex="1" required="required" /></td>
    </tr>
    <tr>
        <td>
            <label for="lname">Last name: </label>
        </td>
        <td>
            <input type="text" name="lname" id="lname" tabindex="2" /></td>
    </tr>
    <tr>
        <td>
            <label for="tel-area">Telephone*: </label>
        </td>
        <td>(<input name="tel_area" type="tel" id="tel_area" tabindex="3" size="3" maxlength="3" required="required" />)
<input name="fir_thr_tel" type="tel" id="fir_thr_tel" tabindex="4" size="3" maxlength="3" required="required" />-
<input name="lst_fur_tel" type="tel" id="lst_four_tel" tabindex="5" size="4" maxlength="4" required="required" /></td>
    </tr>
    <tr>
        <td>
            <label for="emil">Email*: </label>
        </td>
        <td>
            <input type="email" placeholder="example@you.com" name="email" id="emil" tabindex="6" required="required" /></td>
    </tr>
    <tr>
<td> <label for="resn" id="resne">Reason*: </label></td> <td>
    <textarea name="resn" id="resn" tabindex="7" required="required" /></td>
        </tr>
    <tr id="buttons">
        <td>
            <input type="reset" id="resbnt" value="Reset" tabindex="8" />
        </td>
        <td>
            <input type="submit" id="subnt" value="Submit" tabindex="9" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    (function ($) {
        $Overlay = $("<section></section>");
        $Overlay.prop("id", "overlay");
        $modle = $("<article> </article>");
        $modle.prop("id", "modle");
        $Overlay.prependTo("body");
        $modle.prependTo("#overlay");
        $html = "<article> Something went wrong in saving your information!  Please check the require fields, sorry. </article> <button id='closeBtn' value='close' onclick='$.close();'> Close </button>"
        function center() {
            $("#modle").css('top', (($(window).height() - $modle.outerHeight()) / 2 + $(window).scrollTop()) + 'px');
            $modle.css('left', (($(window).width() - $modle.outerWidth()) / 2 + $(window).scrollLeft()) + 'px');
        }

        $.open = function (value) {
            $("#overlay").show(); // show the modal
            $("#modle").html(value);
            center();
        }

        $.close = function () {
            $("#overlay").hide();
        }
    })(jQuery);
</script>
<script type="text/javascript">
    (function () {
        function messager(url) {
            $.post(url, $('form[name="cnt_us-frm"]').serialize(), function (data) {
                if (data.Success === true) {
                    $.get("/Home/PartialSubmit", function (data) {
                        $('#min-content').html(data)
                    });   // loads the page into 'min-content' section when document is ready/load 
                    $.close();
                }
                else {
                    $modle.hide('6500').html($html).show('2500');
                }
            })
        }

        $(document).ready(function () {
            $("#subnt").click(function (event) {
                event.preventDefault();
                var url = "/Home/Submit";
                $.open("<h1> Sending... </h1>");
                messager(url);
            });
        });
    })();
</script>

和服务器代码：

[HttpPost]
    public JsonResult Submit(customers cust)
    {
            bool success = false;
        try
        {
            if (ModelState.IsValid)
            {
                cust.tele_comp();
                saveIntoDb(cust); // database
                SendMail(cust); // mail sender
                success = true;
            }
            return Json(new { Success = success });
        }
        catch (DataException)
        {
            return Json(new { Success = success });
        }
    }

和模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.ComponentModel.DataAnnotations;
using System.Text;
//using System.Text.RegularExpressions;
using System.Web;

namespace img_site.Models
{
    public class customers
    {
        public string cust_id { get; set; } // from the database
        [Required]
        public string fname { get; set; }

        public string lname { get; set; }
        [Required][StringLength(3)]
        public string tel_area { get; set; }
        [Required][StringLength(3)]
        public string fir_thr_tel { get; set; }
        [Required][StringLength(3)]
        public string lst_fur_tel { get; set; }
        [Required]
        public string email { get; set; }
        [Required]
        public string resn { get; set; }
        public string tele { get; set; }
        public Boolean info = false, regex;

        public void tele_comp(){
            tele = "(" + tel_area + ")" + fir_thr_tel + "-" + lst_fur_tel;
        }
}

Answer 1

如果在模型上添加数据批注，并使用@Ajax.BeginForm发布表单，则表单将由mvc本身进行验证，在这种情况下，您还将显式发送ajax调用，并且还必须明确地进行验证。

因此，我建议您使用mvc自己的@Ajax.BeginForm ，它将通过ajax自动发布您的表单，并将根据您在模型上提供的数据注释来验证模型。