ASP.Net MVC 3 RC, Razor
Experiencing some unexpected behavior when I try to use a custom message and using client side validation. The problem is it always displays the custom message even though there is no error.
So say I have a Client Model where the FirstName is set as Required. If I have the following code the validation message is not displayed until I click on Submit which works as expected.
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName)
But now say I want to customize the validation message to use an asterisk like so:
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName, "*")
Now even before I click on the submit button, there is always an asterisk next to the field.
The expected behavior is that it would show the asterisk when there is a validation error.
Thanks for any help.
I found the problem, the following CSS is needed:
.field-validation-valid
{
display: none;
}
.validation-summary-valid
{
display: none;
}
Somewhere along my refactoring those classes got taken out. They are in there by default when you start a new MVC 3 project. Hope that helps someone in the future!
The chosen answer didn't work for me. I had to use the following. Note the class is "error", not "valid". This hides the validation message being shown on page load.
<style>
.field-validation-error
{
display: none;
}
.validation-summary-valid
{
display: none;
}
</style>
Related
I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
I have a List Which i am checking within my Custom Validation attribute. List Renders like this on my VIEW
<input type="check" value="Bath">
<input type="check" value="Food">
and my Custom Validator is...
public class MyAttribute: ValidationAttribute
{
// some logic and then
// Get Data from some webservice
// Make sure CERTAIN checkboxes are selected
// If Bath was NOT checked then
return new ValidationResult("Bath is Required")
// If Food was NOT checked then
return new ValidationResult("Food is Required")
}
Now this works fine & I can show the error message "Some Error" on my view, However my issue is I want to show the RED ERROR BOX around the checkbox which was REQUIRED to check. Currently i am just showing a Error message string on my VIEW. It would be nice for user to see what was REQUIRED.
You can pass a style attribute as the 3rd Argument to the ValidationMessageFor method in razor view as such:
#Html.ValidationMessageFor(m=>m.StudentName, "", new { #style="color:red" })
You can also run your application trigger the validation message, in chrome, right click the validation message and inspect element, go to the debugger window and trace the class associated with the validation error message.
Go to site.css and overwrite the default validation-error message class as shown below:
span.field-validation-error {
background-color: #ffeeee;
outline: 1px solid #ff0000;
}
Hope this will help.
I am using fantastic gem "parsley-rails", it works just perfect for my application.
But now I am facing problem of removing those error messages, because they change form layout.
My html looks like this :
<input data-parsley-minlength="3" data-show-errors="false" id="message_name" name="message[name]" placeholder="Kā Jūs sauc ?*" required="required" type="text" data-parsley-id="9402" class="parsley-error"><ul class="parsley-errors-list filled" id="parsley-id-9402"><li class="parsley-required">This value is required.</li></ul>
My css:
li.parsley-required {
display:none !important;
}
ul.parsley-errors-list {
display:none !important;
}
ul.parsley-error-list li {
display:none !important;
}
This code hide all error messages on first validate click. But If I change input value error message is shown again.
I tried to look some Google results, but no valid resources.
Any tip on this ? Thanks in advance..
It's not clear what you're trying to do.
Errors should get removed automatically by parsley.
If you're doing something funky, call $form.parsley().validate() on your form, or call $field.parsley().reset() on .
I'm developing a web app with MVC 3 / Razor and jquery-mobile. In jquery-mobile, normally you can add data_inline = "true" to an object's attributes and it will prevent the element from stretching all the way across the screen, like so:
#Html.DropDownListFor(m => m.value, options, new { data_inline = "true" })
#Html.ActionLink("Text", "Action", null, new {data_role="button", data_inline="true"})
Both of those work fine. But on a checkbox...
#Html.CheckBoxFor(m => m.value, new { data_inline = "true" })
... it doesn't seem to do anything, and I still get a nasty stretched checkbox. Adding data_role="button" doesn't help (not that I expected it to).
Is there any reason why this is so? Any good way I can get my checkbox to not be stretched without resorting to manual CSS modifications?
The jQM Checkbox does not support data-inline. All you need to do is change the label CSS property display to inline-block.
<label class="inline">
<input type="checkbox" name="chk0" class="ui-btn-inline" />Check me
</label>
.inline {
display: inline-block !important;
}
Sorry for the generic title, but i dont know how to call the element i want to create. Thats what i need... i tried to post image, but i dont get necessary privileges yet. So ill try to describe it.
Here on stackoverflow, on the question's page, after each title and summary there are some boxes displaying the tags from the questions.
I want the exactly same look, but instead of links, those boxes should act the same way as a Radio Button List. I can only choose one of then at a time and when pick one, the selected one ill get different style added to him. After submitting the form i should be able to recover de selected item in the controller.
I'm using Asp.Net MVC4 and the options that make the element will come from a controller.
Sorry for the question without code or something that i allready make. But i have this necessity and i dont even know if this sort of style or element have an specific name or keyword D.
Do you guys know from where to start with something (tutorials with similar final result ?) ?
Thanks for the help and sorry for the bad english.
Code After Looking at the proposed answers' link
CSS Code
input[type=radio] { display: none;}
.rbLista span { font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Sans-serif;
font-size:12px; background: RGB(217,217,217); border: 1px solid RGB(217,217,217); }
.rbLista span:hover { border: 1px solid RGB(54,52,53); background: RGB(54,52,53); color: white; }
.rbLista input[type=radio]:checked + span { background: #D71712; color: #fff; border: 1px solid #D71712; }
.rbLista input[type=radio]:checked + span:hover { background: #D71712; }
and View Code
<section class="rbLista">
#foreach (var item in Model.ChamadoDetalhe.Transitos)
{
<label>
#Html.RadioButtonFor(x => x.NovoTransito.Transito, #item.Text, new { #id = item.Text, #text = item.Text })<span>#item.Text</span>
</label>
}
#Html.ValidationMessageFor(x => x.NovoTransito.Transito)
</section>
You could try something like this. Here's a working demo.