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");
};
Related
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I'm using the validate() - method of struts2 to validate the form input. In my struts.xml I can define a result with name "input" which is displayed if the validation fails. This for the context :-)
Now my question: the form I want to validate contains a selectbox which is filled out of a database. The first time the form is displayed everything works fine. But if I validate the form and the "input" - result is displayed, I get an IOException because of the iterator which outputs the db-result into my selectbox. Is there a solution from struts2 or do I have to use a plugin or something like that? Thank you!
When validation fails, it's often necessary to "reload" data for the form page. There's a FAQ entry that covers repopulating controls after validation, mainly detailing the Preparable interface (preferred) and the use of the <s:action> tag (there are some subtle gotchas that can pop up with this, but in general, it's also okay).
I have a "change password" page that needs to hash any passwords entered on the page via Javascript before sending. To complicate it, the page is loaded via a jQuery load() call, and is submitted by a jQuery.Form ajaxForm() call. Had everything working in MVC2, but MVC3 is giving me trouble.
That is, I have a page with a "Change Password" link that when clicked, loads the change password page into a jQuery modal popup, then the form on the change password page get's submitted via the jQuery.Form library (Essentially just wraps a $.ajax call), and returns it's result into the modal same modal popup.
Essentially, I have a model with two properties, OldPassword and NewPassword. I have two hidden fields generated by by view for these. They hold the hashed value of two other fields, PrehashOldPassword and PrehashNewPassword, and get updated via keyup events (I know, this means it does a whole SHA256 hash on every keyup... inefficient, but got the job doen for testing). The key here is that the regex validation and required field validation needs to be executed on these Prehash fields, which exist on the client side only (As obviously I don't want to transmit these fields to the server in any way).
So I manually create these two and add on the data-val-* attributes to the elements, i.e. they are NOT generated by the MVC helpers, etc. I am guessing that this is where I'm missing something. When the form submits with all fields empty, all of the errors popup that should, but the form goes right ahead and submits anyway.
==
So the things I've tried:
Yes, the unobtrusive library parse() method already get's called to parse the AJAX loaded form contents, and it appears to get all of the data validation stuff correctly, since I see the errors show up as fields blur(), and when I hit submit (before the ajax request completes and replaces the content of the popup).
Possible note: this call to the unobtrusive library's parse method happens AFTER the AJAX successfully loads the change password page into the popup... the AJAX form submit binding is put on document.ready of the loaded content, ergo, the AJAX form submission binding MAY be binding prior to, and thus firing before, the validation calls that the parse method may bind to the submit event...
However, (1) I am doing this same sort of thing in other places without issue, the ONLY DIFFERENCE being that I am manually putting these data-val-* attributes on elements I am creating manually! And (2), if I cause some kind of error on the OldPassword or NewPassword fields, i.e. a required field validation error by not loading a value into them, they display their error, and successfully STOP the form from submitting through the jQuery.Form method.
So I think something has to be wrong here:
<input id="PrehashNewPassword" type="password" name="PrehashNewPassword" data-val-required="The password field is required." data-val-regex-pattern="<%= RegexHelper.PasswordRegularExpression %>" data-val-regex="<%= RegexHelper.PasswordRegularExpressionError %>" data-val="true" />
I know that jquery.validate is getting the rules right, since I DO see the errors. It's just not stopping the form from submitting when their is an error in these manually generated elements, unless I do something like this, and add a pre-submit callback on the form's AJAX submission:
$("#ChangePasswordForm").ajaxForm({
beforeSubmit: function () { if (!$('#ChangePasswordForm').valid()) { return false; } },
target: '#overlay'
});
While this works, it is kind of ugly and I believe it causes the validation to be called twice... Not a huge deal, but less than ideal. So is there some other call that I need to make in the unobtrusive library to bind these?
Not sure if you found the problem, but you may try to
return false
in there if the form is not valid...
.
.
.
if (!$('form').valid()) {
return false;
}
// JSON POST...
.
.
.
If that doesn't work, then you could try to use:
$.validator.unobtrusive.parse($("#dynamicData"));
after dynamically adding your custom inputs. "dynamicData" is the ID of an element wrapped around the form
above found from here: http://weblogs.asp.net/imranbaloch/archive/2011/03/05/unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc.aspx
Out of interest, what happens if you just get the form to validate?
<script type="text/javascript">
$("form").submit(function (evt) {
// validate here should trigger invalid fields
$('form').valid();
// JSON POST...
// stop form submitting
evt.preventDefault();
});
</script>
I've got an MVC app that gives the user textarea's to update some description fields. It's strongly-typed to a table object, and the fields are wrapped in a form with a Submit button.
Occaisionally they don't want any data in a field, but when they delete the text and try to save, the blanked-out field comes back with its original text (i.e. the table object passed to the Save action contains other edits, but attempts to blank out fields result in the original text staying in the field).
I'm assuming this is LINQ trying to determine which fields have been edited, but how do you tell it that it's blank on purpose?
UPDATE: It appears this may be a problem with the TinyMCE jQuery plugin. It adds rich-text functionality to textarea controls. If I turn it off, I can remove text with no problems.
UPDATE 2: It seems to be some kind of javascript bug or something. If I put another dummy field after the problem fields, they work. If I move them to another place in my code, they work. They just don't want to work where they are. Very peculiar.
I'm pretty sure that TinyMCE, by default, puts in <p></p> when the control is emptied.
So if you are checking for "" then you may be disapointed.
This initially caused me some issues but never with saving. I was checking if the field was "" and then doing something else. Once I realised that "" was never going to happen, I adapted my validation accordingly.
I just check that on a recent project using TinyMCE editor, but it indeed send "" for an empty input, and during the implementation we had no issues with that.
alt text http://diarioplus.com/files/pictures/tiny.PNG
The body property is the one with a tinyMCE editor on the client side.
I really think it will be something with the modelBinder or the way you set the values back to the model.
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.