Validation on Modal

How to implement below Validation according to below Logic

public JsonResult List()
{
List listLocation = new List();
var res = dbLocation.GetAllLocation().ToList();
foreach (var item in res)
{
Location obj = new Location();
obj.Id = item.Id;
obj.Description = item.Description;
obj.IsActive = item.IsActive;
listLocation.Add(obj);
}
return Json(listLocation, JsonRequestBehavior.AllowGet);
}
public JsonResult Add(Location objLocation)
{
if (ModelState.IsValid)
{
dbLocation.Add(objLocation);
return Json(new { success = true, message="Saved Successfully"});
}
return Json(dbLocation);
}

Modal Popup

"button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();"> class= "fa fa-plus"> Add New
class="table table-striped table-bordered" style="width:100%" id="tblLocation">
ID
Description
Active
class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
class="modal-dialog">
class="modal-content">
class="modal-header">
"button" class="close" data-dismiss="modal">"true">×class="sr-only">Close
class="modal-title">Add New Location

class="modal-body">

class="form-horizontal">

class="form-group">

class="control-label col-sm-3" for="Id">Id

class="col-sm-2">

"text" class="form-control form-control-sm" id="txtId" placeholder="Id">

you are using return Add() on save_click, this indicates that you want jquery validation, for this go as shown below

function Add()
{
if ($('#txtUserName').val() == '') {
$('#txtUserName').css('border-color', 'red');
return false;
}
else {
$('#txtUserName').css('border-color', '');
return true;
}
// similarly do for all
}

for user name check in the database (whether the username is available or taken)

[HttpPost]
public JsonResult CheckUsername(string username)
{
UsersEntities entities = new UsersEntities();
bool isValid = !entities.Users.ToList().Exists(p => p.UserName.Equals(username, StringComparison.CurrentCultureIgnoreCase));
return Json(isValid);
}

"text/javascript">
$("#txtUserName").focusout(function(){
var username = $("#txtUsername").val();
$.ajax({
type: "POST",
url: "/Home/CheckUsername",
data: '{username: "' + username + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var message = $("#message"); //your span tag near txtusername
if (response) {
//username available.
message.css("color", "green");
message.html("username is available");
}
else {
//username not available.
message.css("color", "red");
message.html("username is NOT available");
}
}
});
};
});
function ClearMessage() {
$("#message").html("");
};

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
you are using return Add() on save_click, this indicates that you want jquery validation, for this go as shown below
function Add()
{
if ($('#txtUserName').val() == '') {
    $('#txtUserName').css('border-color', 'red');
return false;
}
else {
    $('#txtUserName').css('border-color', '');
return true;
}

// similarly do for all
}
for user name check in the database (whether the username is available or taken)
[HttpPost]
    public JsonResult CheckUsername(string username)
    {
        UsersEntities entities = new UsersEntities();
        bool isValid = !entities.Users.ToList().Exists(p => p.UserName.Equals(username, StringComparison.CurrentCultureIgnoreCase));
        return Json(isValid);
    }
"text/javascript">
         $("#txtUserName").focusout(function(){

var username = $("#txtUsername").val();
            $.ajax({
                type: "POST",
                url: "/Home/CheckUsername",
                data: '{username: "' + username + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                var message = $("#message"); //your span tag near txtusername
                    if (response) {
                        //username available.
                        message.css("color", "green");
                        message.html("username is available");
                    }
                    else {
                        //username not available.
                        message.css("color", "red");
                        message.html("username is NOT available");
                    }
                }
            });
        };
});


        function ClearMessage() {
            $("#message").html("");
        };
+2
Arnab Mukherjee5y ago
https://www.c-sharpcorner.com/UploadFile/13048b/model-validation-in-Asp-Net-mvc909/
0