Im trying to us the
Html.ValidationMessageFor(m=>m.MyProperty,"The field is very much required");
However.. Im alos using unobtrusive for my validations, but for some reason it seems like once Im using the customValidationMessage parameter, the unobtrusive validation for that property "breaks".
Or to put it in more simple terms... the validation message is always displayed, no matter if I enter a value or not.. it simply doesnt update/toggle.
The property is also used on a RadioButtonFor.. so the full "code" is:
#Html.RadioButtonFor(m=>m.Myproperty,"Value 1")
#Html.RadioButtonFor(m=>m.Myproperty,"Value 2")
#Html.ValidationMessageFor(m=>m.MyProperty,"Please select ine of the options")
Any ideas?
have you included these jquery libraries?
jquery-1.9.2.js
jquery.validate.js
jquery.validate.unobtrusive.js
If already, add this css style in page.
.field-validation-valid
{
display: none;
}
.validation-summary-valid
{
display: none;
}
Related
I'm using best_in_place 2.1.0 in a rails 3.2 app.
I have a set of best in place fields whose values are dependent on each other.
Because modifying one changes the values for all of them, I need to disable editing for all of them when an AJAX request is sent from any of them.
If you notice, best in place already disables one field while it's waiting for the AJAX request to finish. I just want to extend this so that it disables all of them.
I tried overriding the onclick
$('.best_in_place').bind("onclick", function(e){
e.stopPropogation();
e.cancelBubble();
return false;
});
but that didn't work. Sometimes it appeared to be called prior to the creation of the best in place field, but other times it appeared to occur after. Either way, it didn't work for me.
I also thought about using the "best_in_place:activate" jQuery trigger, but that is called after this.activateForm() in BestInPlaceEditor.prototype{.. activate: } so that doesn't work.
I'm not really sure what to do. Anything that will disable all, or a selection of, best in place fields dynamically will work for me.
If someone is still looking for a solution for that, I went with adding a class to the element, and canceling events via css:
in the js:
$('.best-in-place.parent-setting').on("ajax:success", function(e, t) {
var enable = $(this).data('bip-value');
var childrenSettings = $(this).data('children-setting');
$('.best-in-place.'+childrenSettings).toggleClass('disabled', !enable);
});
in the css:
.best-in-place.disabled{
opacity: .5;
pointer-events: none;
}
I have a ValidationSummary that works pretty well, although it doesn't go away after the last of the form errors are rectified.
I'm not sure if this is default behavior or a bug. It seems more towards the latter, since they don't go away after my form has been submitted.
The only thing I suspect might be impacting the functionality is that the form is created through Ajax.BeginForm().
Even still, shouldn't the ValidationSummary disappear right as I hit the submit button?
You can make it hide on form submit in your javascript. If you inspect element on your validation summary, you'll notice it changes styles from .validation-summary-valid to .validation-summary-errors if there are any errors. So this makes it easy to hide.
e.g.
$('#formName').submit(function() {
if ($(this).valid()) { // checks form is valid.
$('.validation-summary-errors').hide(); // hides it
}
});
This is an example of something I've used prior, hopefully it helps anyone who finds this. I kinda disagree with the accepted answer as it breaks the usability of the summary later.
$("form#AJAX_FormA").on('submit', function (e) {
e.preventDefault();
$(this).validate();
if ($(this).valid()) {
$('.validation-summary-errors ul li').attr("style", "display:none"); //Hide
$('.validation-summary-errors').removeClass("validation-summary-errors").addClass("validation-summary-valid");
ajaxGenerateList($(this).serialize());
}
});
We make newsletters using the mailchimp service for a customer, now our customer would like to print the webversion of the mailings, but without the mailchimp top bar (#awesomebar).
Is there a plugin or something for firefox or chrome that can prevent an div from printing and that is easy to use for a non-technical person? So firebug is not an option.
I allready tried to contact mailchimp about it, but they won't change the print css.
Why not just disable the awesomebar in the first place?
If not, just use some custom CSS in your template. Add the class noprint to any elements they don't want printed, and then in your custom CSS, add below:
<style type="text/css" media="print">
.noPrint, #awesomebar {
display:none !important;
}
</style>
If this doesn't "exactly" work for you, hopefully you can use it as a starting point. The media="print" tag only applies when the browser goes to print - it doesn't affect the display of the page normally.
I am using ASP.net MVC with twitter bootstrap.
I have added the following to get the fields with errors to style properly in bootstrap
$.validator.setDefaults({
highlight: function (element) {
$(element).closest(".control-group").addClass("error");
},
unhighlight: function (element) {
$(element).closest(".control-group").removeClass("error");
}
});
This works great with all validation except custom validations attributes. The custom validator I created checks to see if a checkbox is checked, if not it expects something to be entered in a text field. This is just one example, but other custom validation attributes I have created fail in the same way described below.
If I submit the form, all errors are styled appropriately except for the field with my custom validator. However I know the validator ran because error message showed up, but the message and field are black instead of red.
If I enter some text in the field to satisfy the validator, the error message goes away. Then if I remove that text, the error message returns and everything is styled red as it should be.
Then, if I submit the form again, the red styling goes away even though the error remains, but only for the field with the custom validator, all other error remain red.
On form submit, the defaults I set(shown above) aren't run for the field with the custom validator, but the defaults are run for everything else.
Yet, with the on blur and key up events on the field with the custom validator, everything behaves as expected and all styling works as expected.
I am at a loss of what to look at next. Any help/direction is appreciated.
I had the same issue recently until I found out that I had valid and invalid inputs within the same .control-group. (<input type="hidden"> fields in my case). If that applies to your case as well, you can use the errorClass provided by the highlight and unhighlight methods like this:
function highlight(element, errorClass, validClass) {
$(element)
.addClass(errorClass)
.closest(".control-group")
.addClass("error");
};
function unhighlight(element, errorClass, validClass) {
var c = $(element)
.removeClass(errorClass)
.closest(".control-group");
// make sure not to remove parent container error class,
//if there is still an invalid input field inside
if (c.find("." + errorClass).length < 1)
c.removeClass("error");
};
I've got a model that does some validation checking and adds the errors to ModelState:
ViewData.ModelState.AddModelError("mycontrol", "message")
They display fine on the view side, but is there a way to set the focus to the control that corresponds to the validation message? Right now, the page refreshes and stays at the top of the page, so if the error is towards the end of the page, it's not obvious to the user what happened.
Note: Another solution would be for ValidationSummary to show the list of errors at the top of the page, but I've never been able to get it to display anything. All my errors are displayed via ValidationMessage.
Edit: I found my problem with ValidationSummary. The markup I had was:
<% Html.ValidationSummary()%>
which should have been:
<%=Html.ValidationSummary()%>
I'd still like to know how to snap to the field with the error however.
Some jquery goodness to scroll to the first input with an error. The tricky bit is that you have to get the underlying DOM element BEFORE you invoke focus() as the focus() method on a jQuery object fires the focus event instead of giving focus to the element.
<script type='text/javascript'>
$(document).ready( function()
{
var input = $('.input-validation-error:first');
if(input)
{
input.focus();
}
});
</script>
You could use JavaScript to find the input elements on the page that have the MVC validation HTML class (input-validation-error) added, and move the carat to the first one. That /should/ move the screen to that element although I haven't tested it.
A JS library such as jQuery will make this straightforward to do.