How to use bootstrap 3 form input errors with cfwheels errorMessageOn?

[Thorsten Eilers]

Hi,

I am in the process of upgrading to bootstrap 3 and would like to mark the form input errors in the form fields and show an error message below the form field.

Like here:
http://stackoverflow.com/questions/14361517/mark-error-in-form-using-bootstrap

<div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
 </div>

I do have this code:

<div class="form-group clearfix">
        <label for="user-NickName" class="col-md-3 control-label">
            Nickname           
        </label>
        <div class="col-md-4">
            #textField(objectName="user", property="NickName", class="form-control", label=false)#
            #errorMessageOn(objectName="user", property="NickName", class="help-inline")#
        </div>
</div>

In the browser it renders for a failed field this.

<div class="form-group clearfix">
  <label class="col-md-3 control-label" for="user-NickName">
  Nickname
</label>
<div class="col-md-4">
  <span class="fieldWithErrors">
  <span class="help-inline" position="" association="">Please enter you nickname.</span>
</div>
</div>

I am not sure where I have to map the error classes to the form and where to use "control-group error".

Maybe someone has a hint or example snippet for me?

Regards
Thorsten

[Tom King]

Can you not do something in the config/settings.cfm as a default for that helper?

I tend to do something like this:

// BS3 form settings

set(functionName="startFormTag");

set(functionName="submitTag", class="btn btn-primary", value="Save Changes");

set(functionName="checkBox,checkBoxTag", labelPlacement="aroundRight", prependToLabel="<div class=""checkbox"">", appendToLabel="</div>", uncheckedValue="0");

set(functionName="radioButton,radioButtonTag", labelPlacement="aroundRight", prependToLabel="<div class=""radio"">", appendToLabel="</div>");

set(functionName="textField,textFieldTag,select,selectTag,passwordField,passwordFieldTag,textArea,textAreaTag,fileFieldTag,fileField",

class="form-control",

labelClass="control-label",

labelPlacement="before",

prependToLabel="<div class=""form-group"">",

prepend="<div class="""">",

append="</div></div>"  );

set(functionName="dateTimeSelect,dateSelect", prepend="<div class=""form-group"">", append="</div>", timeSeparator="", minuteStep="5", secondStep="10", dateOrder="day,month,year", dateSeparator="", separator="");

set(functionName="errorMessagesFor", class="alert alert-dismissable alert-danger"" style=""margin-left:0;padding-left:26px;"); 

set(functionName="flash", prepend="<div class=""alert""><a class=""close"" data-dismiss=""alert"">&times;</a>", append="</div>");

set(functionName="flashMessages", prependToValue="<div class=""alert alert-dismissable alert-info""><a class=""close"" data-dismiss=""alert"">&times;</a>", appendToValue="</div>");

set(functionName="paginationLinks", prepend="<ul class=""pagination"">", append="</ul>", prependToPage="<li>", appendToPage="</li>", linkToCurrentPage=true, classForCurrent="active", anchorDivider="<li class=""disabled""><a href=""##"">...</a></li>");

NB, I don't use errorMessageOn, and I use the flashwrapper plugin, but this might give you a nod in the right direction...?

T

[Thorsten Eilers]

Hi Tom,

thanks for your hint.
I never thought of setting this stuff in config/settings.cfm before.
I will give it a try tomorow.

Thorsten

[Thorsten Eilers]

Hi,

I got it working by combining your approach with the adaption of the Bootstrap.cfc plugin.

For pagination I use this working code:

<cffunction name="bPaginationLinks" returntype="string" hint="Bootstrap markup version of the Wheels `paginationLinks` view helper.">
        <cfscript>
            var loc = {};

            // TODO: add previous and next links - http://getbootstrap.com/components/#pagination
            loc.paginationArgs = Duplicate(arguments);       
            loc.paginationArgs.prepend = '<nav><ul class="pagination">';
            loc.paginationArgs.append = '</ul></nav>';
            loc.paginationArgs.prependToPage = '<li>';
            loc.paginationArgs.appendToPage = '</li>';
            loc.paginationArgs.classForCurrent = "active";
            loc.paginationArgs.linkToCurrentPage = true;
            loc.paginationArgs.anchorDivider = '<li class="disabled"><a href=""##"">...</a></li>';       

            loc.paginationLinks = paginationLinks(argumentCollection=loc.paginationArgs);
            // workaround to highligt current page
            loc.paginationLinks = Replace(loc.paginationLinks, '<li><a class="active"', '<li class="active"><a', "all");       
        </cfscript>
        <cfreturn loc.paginationLinks>
    </cffunction>

Does anybody know a good way to implement "previous" and "next" links like http://getbootstrap.com/components/#pagination

<nav>
  <ul class="pagination">
    <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
  </ul>
</nav>

in my pagintion code?

Regards and have a nice christmas time
Thorsten

[Thorsten Eilers]

Hi,
maybe it would be a way to add to the plugin two vars like:

appendAfterPrepend
and
prependBeforeAppend

to insert the strings like
"<li><a href="theDesiredPreviousLink"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>"
and
"<li><a href="theDesiredNextLink"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>"

What do you think?
Thorsten

[Chris Peters]

No, that would not be good API design.

I do this sort of thing with form helpers like this, using get() to get the configured "append" setting for the form helper I'm using:

#textField(
    objectName="user",
    property="firstName",
    append=' <span class="hint">Must not be Chris</span>' & get(functionName="textField", name="append")
)#

--
You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cfwheels+u...@googlegroups.com.
To post to this group, send email to cfwh...@googlegroups.com.
Visit this group at http://groups.google.com/group/cfwheels.
For more options, visit https://groups.google.com/d/optout.

--

Chris Peters
Web Developer
Liquifusion Studios
chris....@liquifusion.com
Skype: liquifusion.support
www.liquifusion.com