This article will show you how you can create a custom
validation of form using jQuery in your asp.net mvc application. In this we
will display the error message as a tooltip.
Some of my previous articles are as follows: Twitter,
Pinterest, Facebook, GooglePlus and Tumblr Social Sharing Buttons Using jQuery
In Asp.Net MVC, Fixed
Header Web Page Using CSS3 Without jQuery In Asp.Net MVC, CountDown
To Show Under Construction Page Using jQuery In Asp.Net MVC, Bootstrap
Style Dynamic jQuery Dropdowns Menu Using Asp.Net MVC In C#.Net, Stylish
Button Using Css3 In Asp.net, How
to Get Mouse Pointer Cordinate Inside a Div Using jQuery In Asp.Net.
So for this article first we will create a new asp.net
application and add a model class file and add the below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Vaidation.Models
{
public class UserModel
{
public
string name { get;
set; }
public
string emailid { get;
set; }
public
string password { get;
set; }
public
string phoneno { get;
set; }
}
}
|
Now add a below controller class file and add the below
code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Vaidation.Models;
namespace Vaidation.Controllers
{
public class HomeController
: Controller
{
//
// GET:
/Home/
[HttpGet]
public
ActionResult Index()
{
UserModel
userModel = new UserModel();
return
View(userModel);
}
[HttpPost]
public
ActionResult Index(UserModel userModel)
{
ViewBag.Message = "Data Recived successfully.";
return
View(userModel);
}
}
}
|
In above code I have added get and set method. In this post method will receive the entered data. After receiving data we will pass success message.
Now create the view file and add the below code.
@model Vaidation.Models.UserModel
@{
ViewBag.Title = "Validation
Of Form To Display Error Message as ToolTip Using jQuery In Asp.Net MVC";
<link rel="stylesheet" href="../../css/validationEngine.jquery.css" type="text/css"
/>
<script src="../../js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="../../js/languages/jquery.validationEngine-en.js"
type="text/javascript"
charset="utf-8">
</script>
<script src="../../js/jquery.validationEngine.js" type="text/javascript"
charset="utf-8"></script>
<script>
jQuery(document).ready(function () {
jQuery("#frmRegistration").validationEngine({
notEmpty: true
})
});
</script>
}
<form id="frmRegistration" class="formular"
method="post"
action="">
<table width="100%" cellpadding="5" cellspacing="10">
<tr>
<td colspan="2" align="center">
<h2>
Registration Form</h2>
</td>
</tr>
<tr>
<td align="right">
User Id :
</td>
<td align="left">@Html.TextBoxFor(m => m.name, new { @class = "validate[required]
text-input" })
</td>
</tr>
<tr>
<td align="right">
Email :
</td>
<td align="left">@Html.TextBoxFor(m => m.emailid, new { @class = "validate[required,custom[email]]
text-input" })
</td>
</tr>
<tr>
<td align="right">
Password :
</td>
<td align="left">@Html.PasswordFor(m => m.password, new { @class = "validate[required]
text-input" })
</td>
</tr>
<tr>
<td align="right">
Phone No:
</td>
<td align="left">@Html.TextBoxFor(m => m.phoneno, new { @class = "validate[custom[phone]]
text-input" })
</td>
</tr>
<tr>
<td colspan="2" align="center" style="color:Green;font-weight:bold;">
@ViewBag.Message
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
|
In above code I have added the library reference and the
jquery function. Now we have done . Run the application to check the output.
About the Author
0 comments:
Please let me know your view