Is Possible to Set a Widget Constraint Dynamically? - grails-2.0

I'm designing dynamic forms for grails and I was wondering if it was at possible to set the widget constraint dynamically?

Setting the widget constraint is not the way to attack this. I suppose the simplest method would be to choose the tag you'd like to display based upon some condition using an "if" tag in your view or template. For instance:
Say you have a Book
class Book {
String name
}
If you use Grails generate-view for this class, Grails will produce a template called _form that looks like the following:
<div class="fieldcontain ${hasErrors(bean: bookInstance, field: 'name', 'error')} ">
<label for="name">
<g:message code="book.name.label" default="Name" />
</label>
<g:textField name="name" value="${bookInstance?.name}"/>
</div>
You can test your condition in this form and change the view:
<div class="fieldcontain ${hasErrors(bean: bookInstance, field: 'name', 'error')} ">
<label for="name">
<g:message code="book.name.label" default="Name" />
</label>
<g:if test="$yourCondition">
<g:textField name="name" value="${bookInstance?.name}"/>
</g:if>
<g:else>
<g:textArea name="name" value="${bookInstance?.name}"/>
</g:else>
</div>
Now the view will display a textField or textArea field based upon $yourCondition.

Related

Asp.Net Validation add custom class

I am trying to add a class to my div if there is an error in the ModelState. Is there any way to achieve this?
This is how the Html looks like:
<div class="form-group">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Now I would like to add the class has-danger to the div arround it if an error occured on the Vorname property. Like this:
<div class="form-group has-danger">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Edit:
If your form is submitted to the server with no prior on-the-client JavaScript validation (old school! but it works), then you’ve got yourself the easiest of all fixed. You can just add these CSS classes whenever the page loads in the following fashion:
$(document).ready(function() {
$('.input-validation-error').parents('.form-group').addClass('has-danger');
});

Style input type file in Laravel

I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks

Disable some [Required] field validators in a view

ASP.NET MVC Core if that makes any difference
Is there a simple way to disable some field validators in a model or view under certain cases?
Most information on the web looks to be from the ASP.NET Forms era.
I could not find too many things to try out but, this looks to not do the trick.
<label asp-for="Files.PromoImage" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Files.PromoImage" class="form-control" />
#if (Model.Content.NewArticle)
{
<span asp-validation-for="Files.PromoImage" class="text-danger"></span>
}
</div>
<div class="col-md-8">
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
</div>
<input asp-for="Files.PromoImage"/> will generate validation span and data-required attribute if the PromoImage property is marked with the [Required] attribute. You can check the generated html in the browser.
The easiest way to achieve what you want is to remove the [Required] attribute in the model and have something like this in the view:
#if (Model.Content.NewArticle)
{
<input class="form-control" data-val="true"
data-val-required="The PromoImage field is required." name="Files.PromoImage"
placeholder="Promo Image" type="text" value="">
}
else
{
<input asp-for="Files.PromoImage" class="form-control"/>
}
Then again on the server, in your post action method, you have to do a manual validation for the PromoImage property.
Not so trivial but more elegant approach is to extend the MVC and jQuery validation with your own validation attribute and jQuery validator, e.g. [RequiredIf]. The API is slightly different in ASP.NET Core 1.0, but here is an example: Custom validation

Plone Search: get method to pass via URL to another site

I am using Plone 4.3 and the diazo bootstrap theme and want to use the site-search-form to pass the searchterms including two search-options to another site (catalog) via get method.
To achieve this I have modified the plone.searchbox template and changed some content of it:
<div id="portal-searchbox"
i18n:domain="plone"
tal:define="navigation_root_url view/navigation_root_url;
search_input_id view/search_input_id;">
<form id="searchGadget_form" method="get" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" action="http://www.thecatalogadress.net/opensearch">
<div class="LSBox">
<input name="LOCATION"
type="hidden"
value="HAGENBIB" />
<input name="SG1.SG.HAGENBIB:SGHagenvk"
type="hidden"
value="on" />
<input name="QUERY_alAL"
type="text"
size="18"
value=""
title="Finden"
class="searchField" />
<input class="searchButton"
type="submit"
value="search"
i18n:attributes="value label_search;" />
<div class="LSResult" id="LSResult"><div class="LSShadow" id="LSShadow"></div></div>
</div>
</form>
</div>
By now the search term is passed, but the two input-options are not introduced in the URL thus the query in the catalog doesn't work.
The result I need as URL is http://www.thecatalogadress.net/opensearch?LOCATION=HAGENBIB&SG1.SG.HAGENBIB:SGHagenvk=on&QUERY_alAL=test
As I am new to plone I wanted to ask for a hint, where to look at or what to change in order to add the two input-options to the URL.
I think you're probably forgetting to add the proper ZCML directives for the override on the template take place.
Take a look at this tutorial on Overriding Viewlets.

AngularJS field validation->styling "popup"

Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link

Resources