Click here to Skip to main content
11,720,785 members (84,118 online)
Click here to Skip to main content

Knockout Validation Error Message & Bootstrap v3.2 input-group

, 13 Jul 2014 CPOL 7.1K 115 9
Rate this:
Please Sign up or sign in to vote.
Knockout Validation Error Message & Bootstrap v3.2 input-group

Introduction

When we are using knockout validation and bootstrap together, we may face problems with the alignment of error messages with bootstrap input-group session. Like below:

Background

Let’s say we have a .from-group div which contains an input field, inside a .input-group div.

<div class="form-group">
    <label class="col-sm-2 control-label">User Type</label>
    <div class="col-sm-3">
        <!-- input holder -->
        <div class="input-group">
            <input type="text" class="form-control" 
            placeholder="User type" data-bind="value: userType"/>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Add</button>
            </span>

            <!-- need to add error message just here, to avoid alignment error -->
        </div>
    </div>
</div>

Now what are the options to solve such a problem?

  1. Using a custom binding handler to populate error message holder
  2. Using inline error message holder for each field in HTML DOM

1. Using a Custom bindingHandler

jsfiddle

Here is the custom binding handler, with specifications:

  • What type of error message holder should be used (span)
  • What would be the class of error message (.validatationMessage)
  • If the input is inside a holder (of .input-group) append error mgs just after it.
  • If not, append error mgs just after itself
/*custom bindingHandler for error message*/
ko.bindingHandlers.validationCore = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // insert the message
        var span = document.createElement('SPAN'); //element to hold error message
        span.className = 'validationMessage';      //error message style
        var parent = $(element).parent().closest
        (".input-group");       //find the holder div of the input
        if (parent.length > 0) {
            $(parent).after(span);    //has holder: add message holder just after the input holder       
        } else {
            $(element).after(span);   //no holderL add message holder just after the input itself
        }
        ko.applyBindingsToNode(span, { validationMessage: valueAccessor() });
    }
}; 

2. Using Inline Error Message Holder

Place error message holder at desirable place. The "validationMessage: userType" is important, to specify this holder is for which field.

<div class="form-group">
    <label class="col-sm-2 control-label">User Type</label>
    <div class="col-sm-3">
        <!-- input holder -->
        <div class="input-group">
            <input type="text" class="form-control" 
            placeholder="User type" data-bind="value: userType"/>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Add</button>
            </span>
        </div>       
        <!-- need to add error message just here, to avoid alignment error -->
        <!-- error message holder -->
        <span class="validationMessage" 
        data-bind="validationMessage: userType"></span>
    </div>
</div>

Now, specify not to add error message automatically:

/*error span would not be inserted
and we have to specify the location of error message*/
ko.validation.init({ insertMessages: false });

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DiponRoy
Bangladesh Bangladesh
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Lydia Gabriella16-Jul-14 10:40
memberLydia Gabriella16-Jul-14 10:40 
GeneralRe: My vote of 5 Pin
DiponRoy27-Dec-14 23:36
memberDiponRoy27-Dec-14 23:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 13 Jul 2014
Article Copyright 2014 by DiponRoy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid