Bootstrap twitter 3.0 and knockoutjs validation

Bootstrap twitter 3.0 and knockoutjs validation

Asked on November 22, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

        The  errorMessageClass and decorateInputElement options should be included for proper output.

    ko.validation.init(
    {
      errorElementClass: 'has-error',
      errorMessageClass: 'help-block',
      decorateInputElement: true
    });
    var viewModel = ko.validatedObservable(
    {
      name: ko.observable().extend(
    {
        required: true
      }),
      email: ko.observable().extend({
        required: true,
        email: true
      }),
      submit: function() {
        if (!this.isValid()) {
          this.errors.showAllMessages();
        } else {
          alert('good job');
        }
      }
    });
    ko.applyBindings(viewModel);
    
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container">
      <form class="form-horizontal">
        <div class="form-group" data-bind="validationElement: name">
          <label class="control-label col-xs-2" for="name">Name</label>
          <div class="col-xs-10">
            <input id="name" class="form-control" type="text" data-bind="textInput: name" />
          </div>
        </div>
        <div class="form-group" data-bind="validationElement: email">
          <label class="control-label col-xs-2" for="email">Email</label>
          <div class="col-xs-10">
            <input id="email" class="form-control" type="text" data-bind="textInput: email" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary" data-bind="click: submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
    
    Answered on November 22, 2018.
    Add Comment

        Expand the  knockout validation core like this:

    var init = ko.bindingHandlers['validationCore'].init;
    ko.bindingHandlers['validationCore'].init = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
      init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
      var config = ko.validation.utils.getConfigOptions(element);
      // if requested, add binding to decorate element
      if (config.decorateInputElement && ko.validation.utils.isValidatable(valueAccessor()))
    {
        var parent = $(element).parents(".form-group");
        if (parent.length)
    {
          ko.applyBindingsToNode(parent[0], { validationElement: valueAccessor() });
        }
      }
    };
    

        This code help to  makes the parent form-group be designed with the same class as the input.

    Answered on November 22, 2018.
    Add Comment

        Use the “validationElement” binding handler on the bootstrap form div-

        Use this code:

    <div class="form-group" data-bind="validationElement: someObservable">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess">
    </div>
    

        Then make the configuration for the knockout validation plugin to utilize the bootstrap error class of “has-error”.

    ko.validation.init({errorElementClass:'has-error'})
    
    Answered on November 22, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.