I am using MVC3 and my view has a mixture of razor and raw html in my view e.g.
<div class="editor-field">
#Html.EditorFor(model => model.PAGE)
#Html.ValidationMessageFor(model => model.PAGE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PERIODICAL)
</div>
div class="editor-field">
<div class="editor-field">
<input type="text" id="periodicallist" name="tiperiodical" />
</div>
</div>
My JavaScript applies the tokenInput control plugin to the textbox and its all fine, but I wonder how I can validate this (i.e. for empty textbox/tokenInput), it needs to filled with at least 1 token. At the moment it's confusing having these two forms of creating a view, letting Razor constuct elements direct from the model, and then adding more complexity/cusomization by usin jQuery plugins etc.
Can anyone advise how I can validate jQuery plugins on posting back to the controller?
Cheers
If you are using unobtrusive validation then you all have to do is add the necessary HTML5 data attributes to the input elements from javascript and microsoft's unobtrusive javascript library will take care of the rest.
For ex. if you have dynamically injected a textbox into the form through javascript and you need to perform required validation then all you have to add the data-val and data-val-required attributes as below.
<input data-val="true"
data-val-required="No. of joinees is required"
name="NoOfJoinees"
type="text" />
EDIT:
To display the validation error message you have to inject a span near to the field,
<span class="field-validation-valid"
data-valmsg-for="NoOfJoinees"
data-valmsg-replace="true">
</span>
Related
I have a View in ASP.NET Core application where I have a form:
<div class="form-group">
<label asp-for="#Model.Property" class="col-md-2 control-label">Description</label>
<div class="col-md-10">
<textarea asp-for="#Model.Property" class="form-control" rows="10" data-val-maxlength-max="1000"></textarea>
<span asp-validation-for="#Model.Property" class="text-danger" />
</div>
</div>
I want to make textarea empty and Not to have the value from Model. I don't see any value property on this textarea.
Is it possible to have textarea mapped to #Model.Property but Not display it?
I'll be using this textarea for POST only and I don't want to display anything for GET. But I want to have other properties fetched so that's why I need the model in GET.
I also tried to change the Model property in controller before sending, but this model is a part of a DBSet and if I modify in controller then the DBSet gets affected.
Javascript is another option but I want to avoid that.
I had a look at How to overwrite one model property in ASP.Net core but this is not convincing.
Thank you.
Is there a way in Sitecore WFFM MVC to implement a custom validation on a field which is conditionally required based on the selection of another field
"DynamicValidationBase":- This is a attributerized validation where this validation is applied on the field, which does have the access to the form details(other controls on the form).
"FormCustomValidator":- This never gets triggered as this is a "MVC Form".
Ex:
<style>
div{padding:10px 0;}
ul{
list-style:none;
}
</style>
<div>
<label for="Email">Email:</label>
<input type="text" name="Email"/>
</div>
<div>
<label for="Phone">Phone:</label>
<input type="text" name="Phone"/>
</div>
<div>
<label for="IPrefer">I Prefer:</label>
<ul>
<li>
<input type="radio" id="rdo_email" checked="checked" name="rdoPreferType"/>
<label for="rdo_email">Email</label>
</li>
<li>
<input type="radio" id="rdo_phone" name="rdoPreferType"/>
<label for="rdo_phone">Phone</label>
</li>
</ul>
</div>
RequiredIfPopulatedAttribute -
First, a custom attribute is needed to decorate the custom field. This feeds necessary data from the form to the client side to build the validation and validation error message.
Custom Field Class -
Next, create a custom field that inherits from the desired field but add the attribute above to the Value property.
Custom Field View -
Add any customizations to the presentation in this mvc view. Ensure that the model is the custom class above. Save this .cshtml file with the other WFFM views.
Javascript -
Add the following js validators:
$scw.validator.addMethod()
$scw.validator.unobtrusive.adapters.add()
Sitecore updates -
Create a FieldType referencing the custom class in the MVC Type field.
Reference this new custom FieldType as the Type field in the Form Designer.
The form field’s Parameters field contains a list of values that feed the custom field’s properties.
Above is an outline of the steps to accomplish this. For illustrations, please see: https://soyouwannasitecore.wordpress.com/2016/10/27/sitecore-wffm-required-if-outlined/
In my MVC project I'm using an ajax form to dynamically update some search results based on a modified search term.
When rendering the Ajax.BeginForm() Method, it doesn't render a <form> tag on the page (in the DOM)
everything is set up fine, Jquery, Unobtrusive and AJAX are all referenced and I have working Ajax.BeginForm instances elsewhere
#using (Ajax.BeginForm("FilterSearch","Attachment", new AjaxOptions()
{
OnComplete = "updateSearchResults",
HttpMethod = "POST"
},new{}))
{
#Html.HiddenFor(model => model.AccountId)
#Html.HiddenFor(model => model.ContactId)
#Html.HiddenFor(model => model.OpportunityId)
#Html.TextBoxFor(model => model.SearchTerm, new { placeholder = "Search Term", #class = "header-search-box" })
<input type="submit" class="header-search-input" />
}
is just rendering inside the DOM as
<input id="AccountId" name="AccountId" type="hidden" value="">
<input id="ContactId" name="ContactId" type="hidden" value="">
<input id="OpportunityId" name="OpportunityId" type="hidden" value="O6UJ9A001TB1">
<input class="header-search-box" id="SearchTerm" name="SearchTerm" placeholder="Search Term" type="text" value="">
<input type="submit" class="header-search-input">
Things to try (generally speaking):
Examine your source code (and not what the DOM is interpreting).
The DOM is based on how a browser/HTML parser interpreted the page, and now how it may actually be output. (Invalid markup will generally be suppressed, to the best of the parser's ability, and won't show up in debug tools, but will still sit on the page).
Confirm you don't have any markup mis-aligned.
Razor is smart enough to detect invalid markup, and may be cleansing output (and fixing a potential mistake), but not in a manner you were expecting.
Given this is dynamic content, make sure you're not nesting forms.
Ajax.BeginForm (and the other form helpers) supply <form>/</form> tags regardless; It's in the ctor/de-ctor methods to output those tags.
Some kind of post-processing (on the side of the AJAX processor) may be "cleansing" the output to avoid invalid HTML (e.g nested form tags). If it sees there's already a <form>, it may strip that tag from any supplemental markup being brought in.
You cannot make a form inside another form. Check your parent views to make sure you haven't accidentally started a form, and then included this partial page.
(Thanks for the tip #LiamHT)
I am working on a project and in the registration page I want to get a list of all countries in a dropdown list through google API. i used cultureInfo but it get list of just unik 127 countries. i want to use google Map API. Can anyone please show me what I need to do in the Controller, the View and model or whatever is required ? I have a view of the registraion page
#model Retail_MVC.Models.registration
#{
Layout = null;
}
<div class="my_wrapper">
<div class="my_left_box">
#Html.LabelFor(model => model.username)
</div>
<div class="my_right_box">
<input type="text" id="txtusername" name="UserName"/>
</div>
</div>
-- here i want to get dropdownlist for all countries--
I understand with built in function to render UI controls like
#Html.TextBoxFor(model => model.CustomerId)
#Html.ValidationMessageFor(model => model.CustomerId)
The rendered Html will look like
<input data-val="true" data-val-number="The field CustomerId must be a number." data-val-required="The CustomerId field is required." id="CustomerId" name="CustomerId" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="CustomerId" data-valmsg-replace="true"></span>
All the attributes inside input elements are used to support unobtrusive validation feature.
But for some reason I cannot render by using Html helper, but I have to hand code Html markup like
<select id="MyId" name="MyId" />
<%=Html.ValidationMessageFor(model => model.MyId)%>
In this case how can I still make unobtrusive validation word without hard code all these attributes in select element?
Thanks
Hardy
Unobtrusive validation relies completely on this attributes to determine which validation it will apply to the element, you will have to hard code them in your html is you dont want to use the helper, just make sure the name attribute of you select tag is equal to the property name it binds to.