Validation / Remote Validation with knockout.js in vb.net mvc

Question

Pretty simple goal, I want to make sure a username entered by a user is unique right after they enter it.

I thought I could use Remote Validation, but the page uses knockout.js so the viewmodel is JavaScript. From what I gather I would have to have passed in my model that has the data annotations in VB to use Remote Validation. I can't seem to find examples of this feature that include the html so it's hard to figure out.

How can I accomplish something similar with knockout? I've seen another knockout validation library but don't want to have to add another library to the solution unless it's the only option. It also seems like there should be something better than having an jquery onchange event and using AJAX to call a function on my controller.

I think I have to ultimately call my function on the controller to check the database, it's more the jquery/html attributes I can use to do this as cleanly as possible that I'm struggling with. Thanks for any advice.

milagvoniduak · Accepted Answer · 2014-05-07 15:21:47Z

2

You can subscribe to the change of the username observable on your viewmodel and issue ajax request to the controller that will return the bool.

Something like this

1) Your view model

function registrationViewModel() {
   var self = this;
   self.username = ko.observable();
   self.usernameUniqueue = ko.observable(true);
   self.username.subscribe (function() {
    $.ajax({
        url: '/registration/isusernameuniqueue',
        data: { username: self.userName() },
        type: 'POST',
        success: function(result) {
          self.usernameUniqueue(result);
        }
    });
   });
}

ko.applyBindings(new registrationViewModel())

2) Your view

   <input type="text" data-bind="value: username" />
    <span data-bind="visible: !usernameUniqueue()" style="display:none">user name not uniqueue</span>

3) Your controller

public class Registration : Controller 
{
   [HttpPost]
   public ActionResult IsUsernameUniqueue(string username)
   {
     // make a check here and return true or false...
     return Json(/*true or false*/);
   }
}

answered May 7, 2014 at 15:21

milagvoniduak

3,2541 gold badge20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mrshickadance Over a year ago

Thanks for a thorough example. Seems like essentially same thing as an onchange, but a little more dynamic and more ability to leverage more knockout.

Collectives™ on Stack Overflow

Validation / Remote Validation with knockout.js in vb.net mvc

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related