I'm using Fomantic(Semantic) UI in my Ruby on Rails, and I realize my forms get messed up when validations fail because of the fields_with_errors class that's automatically added. Is there a known fix for this?
Prior to submission, my form looks like this
After a failed submission, where nothing is entered in any of the field, it looks like this
In one of my projects I use the following code inside config/application.rb
config.action_view.field_error_proc = Proc.new do |html_tag, instance|
%Q(<div class="field error">#{html_tag}</div>).html_safe
end
This code uses semantic way of indication of fields in error state. You can further customise this setting to your needs, see rails docs for details.
Next important point is an extra check on your form tag to add semantic ui form error class, something like:
form_for(#model, html: {class: #model.errors.any? ? 'ui form error' : 'ui form'}) do |f|
This will show error messages if you use them.
Related
I want the user to be able to write handlebar tags in a text editor like {{username}} which will be saved in the database to be rendered later in the server using server-side rendering.
However, I want to add a client-side check to see if there is any faulty handlebar tags like {{username} or {username}} or {{username or username}}
I tried using Blaze.renderWithData(), but it didn't throw any error and just rendered the values as is.
Is there a way to detect faulty tags?
Thanks.
Alert-Banner is applied in our clarity UI. It is triggered by error message and Alert-ERROR message type.
<alert-banner [message]="message" [type]="messageType"></alert-banner>
This alert only shows up after UI main page get refreshed.
Not sure if the way we use alert-banner is wrong - some settings that trigger page refreshed is missed in the alert-banner definition.
Or we should apply other alerts mechanism. reading around https://vmware.github.io/clarity/community
could not find an example pass varied "alert text" in.
Clarity doesn't have an <alert-banner> component. Did you check where it was defined?
Plone/Zope's z3cforms inherit from BrowserPage, and therefore should be able to be rendered without the use of an additional View and View Class. When I try to do this, the form renders fine, but none of the form's fields appear. I am trying to solve why this occurs. Keep in mind this example is using collective.z3cform.wizard, which essentially provides two classes, a Wizard and a Step. A Wizard is a Form (capital F) that mostly provides the machinery to glue the Steps together and maintain state with sessions, and a Step is just a Form.
To me, it feels like either the macro is incorrect, the context is wrong, or there needs to be some wrapping/unwrapping of the form. Basically, I feel like there's some one magic line of code or piece of information I'm missing, which is often the case with Plone.
When the form is wired up to use a separate view (which is redundant), the form renders fine with all the fields showing.
Since I understand this is complex, I've built an example-only standalone package on GitHub that showcases the problem. If you install this package into a stock Plone site with buildout, you will get three views:
http://localhost:8080/Plone/working
http://localhost:8080/Plone/almost
http://localhost:8080/Plone/broken
The working view requires a separate view and a whole-template-wrapping TAL tag, which is both kludge and redundant...but it works and renders the form with all of its fields.
The broken view is wired up how it should be, with the form instance representing the view itself, with the template defined in the Wizard class.
The almost view is identical to the broken view, except that the template is associated with the Wizard's Step rather than the Wizard itself. This results in a broken render, but the form renders with all of its fields.
I hope someone can help me trace down why exactly it is that the broken view renders the form, complete with buttons, but none of the form's fields.
Thank you in advance.
Your broken view does not render the fields because it does not try to render the current step. The default wizard template has something like this in it:
<div tal:define="form nocall:view/currentStep"
tal:replace="structure form/render" />
which looks up the current step and renders it. But you've overridden that with your own template which just calls the ploneform-macros, which is a generic z3c.form thing that knows nothing about the existence of steps.
You should stick with the default wizard template instead of overriding it, or if you need to customize it you should copy the default wizard.pt from collective.z3cform.wizard as a starting point.
Meanwhile, your 'almost' view is indeed almost working. The problem here is that the wizard's default template renders the step's template in the middle...but your step's template is set up to produce a full html page (because it uses the master macro from main_template). If you need to customize this template, I would again recommend starting by copying the default step template from c.z.wizard (wizard-step.pt)
The Spring MVC JSP tag library has a tag for rendering form errors. This makes it easy to render an error message next to, say, an input text field. However, it is common practice on many websites to also style the input text field itself (with a red border maybe) to highlight a validation error.
Is there any way of doing this with the Spring JSP tags or will I have to bake my own solution?
I have never used Spring MVC JSP tags but looking at the documentation it looks like cssErrorClass is the way to go:
<form:input path="userName" cssErrorClass="error"/>
Equivalent to "class" - HTML Optional Attribute. Used when the bound field has errors.
Obviously you can now define input.error class in your CSS stylesheet.
You can use spring:bind tag around the form:input tag. In between the spring:bind tag you can use something like ${status.error ? 'error' : ''} for your style class.
status.error will be true if errors. form input field is available
I am using master page where i need to move value of one listbox to the other with the help of jQuery I tried many ways but wasn't able to hit the nail.
The methods I tried are as follows:
$("[id$='ModuleMasterListBox option:[#selected]']").appendTo($("[id$='ModuleSelectListBox']"));
$("[id$='ModuleMasterListBox option:#selected]'").appendTo($("[id$='ModuleSelectListBox']"));
var module = $("[id$='ModuleMasterListBox']").val();
module.appendTo($("[id$='ModuleSelectListBox']"));
These are the methods I tried which failed - please help me out....
You should be able to do it like this:
$("[id$='ModuleMasterListBox'] :selected").appendTo("[id$='ModuleSelectListBox']");
From your markup and the # sign it looks like you're using an outdated version of jQuery, you may want to consider upgrading. In the above we're using the attribute-ends-with selector to get the <select> the using :selected to grab the selected <option> before moving it.
Keep in mind since it looks like you're using ASP.Net this will by default throw validation errors on the server-side, you'll have to disable page validation for it to allow items it didn't bind.