mvc4 ajax jQuery html5 form validation C#
本文关键字:validation form html5 ajax jQuery mvc4 | 更新日期: 2023-09-27 17:56:09
如何显示使用 ajax jQuery 加载的 html5 表单的验证,并且信息通过 ajax post 发送到服务器? 我有一条错误消息,显示何时出现问题;这只是一个笼统的信息。 但是,我想显示某些信息输入错误或其他内容。
这是我的代码:
<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;
}
}
如果您在模型上添加数据注释,并使用@Ajax.BeginForm
发布表单,则表单将由 MVC 本身进行验证,在这种情况下,您也显式发送 ajax 调用,并且还必须显式进行验证。
因此,我建议您使用 mvc 自己的@Ajax.BeginForm
它将自动通过 ajax 发布表单,并根据您在模型上提供的数据注释验证模型。