user2915577 user2915577 - 1 month ago 9
C# Question

asp.net mvc remote validation with jquery

I need a help.
I have a User registration form and I have to map "Customer" with user.

Now I want to validate user "customer" which is came from another source and I put the "customer" in Select list "customer" are more then 2000 that's why I use JQuery Chosen plugin to search in select list
but "customer" Field depend on "roles" that's why on page load "customer" field is hidden by default when I change the role "customer" field(chosen select list) display and when i am Selecting customer its not firing remote validation.
I tried to make it visible on "inspect element" and I change the display:none to display:bock and try to change value from chosen its not working when i change the orignal select list value from clicking on select list then its working fine i mean its firing my remote validator method here is full code example what i am doing.
please help i want to validate on when chosen select list value change.

This is RegisterViewModel

public class RegisterViewModel
{
[Required]
[Display(Name = "Role")]
public string Role { get; set; }

//for edit view model additionalFields which will only require for edit mode
//[System.Web.Mvc.Remote("DoesCustomerCodeExist", "Account", AdditionalFields = "OldCustomerCode")]
[Required(AllowEmptyStrings = false, ErrorMessage = "Customer Code is required.")]
[Display(Name = "Customer Code", Description = "A customer code come from our oracle system.")]
[System.Web.Mvc.Remote("DoesCustomerCodeExist", "Account")]
[Range(0, int.MaxValue, ErrorMessage = "Please enter valid Customer Code in number only.")]
public string CustomerCode { get; set; }

}


Here is my view cshtml in this file also have js code to display customers chosen Select list when role changed.

//select Role
<div class="form-group">
@Html.LabelFor(m => m.Role, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.DropDownListFor(x => x.Role, ViewBag.Roles as SelectList,"", new { @class = "form-control chosen-select", data_placeholder = "Select a Role" })
@Html.ValidationMessageFor(m => m.Role, "", new { @class = "text-danger" })
</div>
</div>

//Customer Code
<div class="form-group condition-div user hidden ">
//this hidden field is only for edit mode
//@Html.Hidden("OldCustomerCode", Model.CustomerCode)
@Html.LabelFor(m => m.CustomerCode, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.DropDownListFor(x => x.CustomerCode, (SelectList)ViewBag.Customers, "", new { @class = "form-control chosen-customers", data_placeholder = "Select Customer" })
@Html.ValidationMessageFor(m => m.CustomerCode, "", new { @class = "text-danger" })
</div>
</div>


@section Styles{
@Styles.Render("~/Content/chosen")
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/chosen")

<script type="text/javascript">
$('input[type=text]').tooltip(
{
placement: "right",
trigger: "focus"
}
);

$(".chosen-select").chosen({ allow_single_deselect: true});

$('#Role').change(function () {

if (this.value == "") {
$('.condition-div').addClass('hidden'); // hide all the conidional divs
} else if (this.value == "NBP User" || this.value == "NBP Head" ) {
$('.condition-div.admin').addClass('hidden'); /// hide admin conditional divs
$('.condition-div.user').removeClass('hidden'); // show user role conditioanl div
//configure selectlist to Chosen select and if i remove this line and show orignal select list its working fine mean remote validating on change but if i use this is not working on change.
$(".chosen-customers").chosen({ allow_single_deselect: true, search_contains: true });
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-customers)" });
} else if (this.value == "ICIL User" || this.value == "ICIL Head" || this.value == "FIO User" ) {
$('.condition-div.user').addClass('hidden'); /// hide user role conditional divs
$('.condition-div.admin').removeClass('hidden'); // show admin role conditional divs
$(".chosen-branch").chosen({ allow_single_deselect: true });
$.validator.setDefaults();
}
});
</script>
}


Controller Action to validate Customer Code

public ActionResult DoesCustomerCodeExist(string CustomerCode, string OldCustomerCode)
{
//the oldCustomerCode will come null in this case cause its register view and in edit view OldCustomerCode will be use
if (CustomerCode == OldCustomerCode)
return Json(true, JsonRequestBehavior.AllowGet);

if (DbContext.Users.Any(x => x.CustomerCode == CustomerCode))
return Json("Customer code already exists in application. Please verify user details.", JsonRequestBehavior.AllowGet);

if (DbOracle.IsCustomerCodeExist(CustomerCode))
return Json(true, JsonRequestBehavior.AllowGet);
else
return Json("The customer code does not exist in database.", JsonRequestBehavior.AllowGet);
}


All code working fine if i did not use jquery chosen plugin.
In short issue is when I use chosen plugin for select list remote validation is stop validating values.
I can share images if u guys need now I have a limited account so i cant upload snaps shots....
Please help me.

Answer

you should have to put some JQuery on client side to track the "CustomerCode" field when change of customer field jsut call "focusout()" event of "CustomerCode" e.g:

    $('#CustomerCode').change(function () {
        $(this).focusout();
    });
Comments