I'm doing validation on User login input I wanted to be like ab12123. so I validate it by javascript to validate on button click. if it is not valid, it should show a message. the problem is the function doesn't work and I open the dev tools to inspect the javascript, there is no error. the view:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<label class="control-label col-md-2">
User Login <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
@Html.TextBox("UserLogin", null, new { @class = "form-control", required = "required" , id= "UserLogin" })
<div class="col-lg-3" id="checkID" hidden>
<label style="color:red">Please enter the ID in the Proper Format Numbers only EX:kl12123</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">
Username <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
@Html.TextBox("UserName" , null, new { @class = "form-control", required = "required", id = "UserName" } )
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">
Groups <span class="required" id="star">*</span>
</label>
<div class="col-md-4">
@Html.DropDownList("GroupID", null, htmlAttributes: new { @class = "form-control", required = "required" , id= "GroupID" })
@Html.ValidationMessageFor(model => model.GroupID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" class="btn btn-success" value="ValidateMe" onclick="ValidateMe()" />
</div>
</div>
</div>
}
javascript:
function ValidateMe() {
//$('#GroupID').on('change', function () {
var IDValid = false;
var Login = $('#UserLogin').val();
var name = $('#UserName').val();
var GroupId = $('#GroupID').val();
if (Login.length < 6) {
$('#checkID').show();
IDValid = false;
}
else {
var regexnumber = new RegExp(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/);
if (regexnumber.test(Login)) {
$('#checkID').hide();
IDValid = true;
}
else {
$('#checkID').show();
IDValid = false;
}
}
if (IDValid == true) {
var data = {
UserLogin: Login,
UserName: name,
UserGroup: GroupId
};
$.ajax({
type: 'POST',
url: '/Account/SaveUser',
data: data
});
}
}
I appreciate your help in this matter. Thank you.
MVC can automatically handle client side validation using jQuery-validate, which should come pre-setup. It uses attributes on the model to set the validation requirements, and the Html.HelperFor
extensions for model binding. You should see this line in App_Start/BundleConfig.cs
confirming it's installed:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
If not, you can download it here , unZIP and install in the Scripts
directory, and add the above line to your BundleConfig.cs
.
You would use this method like so:
Model
using System.ComponentModel.DataAnnotations;
public class User
{
[Required]
[RegularExpression(@"(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}", ErrorMessage = "Please enter the ID in the Proper Format Numbers only EX:kl12123")]
public string UserLogin { get; set; }
[Required]
public string UserName { get; set; }
[Required]
public int UserGroup
}
View
@model Namespace.User
// Replace the @Html.TextBox() helpers with these:
@Html.TextBoxFor(model => model.UserLogin, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserLogin, "", new { @class = "text-danger" })
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
@Html.DropDownListFor(model => model.UserGroup, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserGroup, "", new { @class = "text-danger" })
// Place the following at the very bottom of your view:
@section scripts
{
@Scripts.Render("~/bundles/jqueryval")
}
Gives us this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.