I have a form which loads a div on client side. I have hard coded textbox controls with all validation attributes, similar to what it renders when loaded from server. Inside the div there is submit button, but when I click on submit all validations messages on the form are displayed. I just need only the div elements validation messages to be shown. Telerik Grid control in ajax mode, does similar thing, i.e., appends textboxes with hardcoded validation attributes on client side, but it manages to fire validations only for the grid not entire form. I think I am missing something here.
$('#div').valid() --> doesn't work
$('#form').valid() --> works
You need to parse the validation rules of the containing form once you add the div to the DOM:
var form = $('#div').closest('form');
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
and here's a live demo.
Related
I'm loading an Ajax Form inside a popup. the popup content is written client side.
unobtrusive-ajax is not triggered by the form. and its events are not called.
This is because of loading the Ajax Form dynamically. and unobtrusive-ajax is not binded to it.
Is there any method for binding dynamically loaded ajax forms with unobtrusive-ajax ?
Is there any way to fix that?
You need to reset validation for validating dynamically loaded form. after loading form in popup window
reset validation:
var form = $('your form');
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
I found the problem. unobtrusive-ajax is working with dynamically added forms. and events are binded. Problem was about copying my markup inside popup and I had two items with same ID. jquery selectors was not working.
I removed my original markup (that I was copying inside popup). and everything is ok now.
is it somehow possible to add an anchor (or hash) to a Struts 2 Action-URL? To be specific:
I have a html form which can be extended with more fields if the user clicks a button "add more fields". This Button sends a html submit to the backend (Action "thismyaction") where a list object is filled with another set of input fields. The action then returns to a tile "thisismyform" which loads the same jsp as before, where the new fieldset is visible.
(Unfortunately there is no way to achieve that via ajax / JS in this project at the time. I know that you usually add fields that way, but i got the project as it is.)
Each fieldset is counted (fieldset-0, if user adds more fields another set is added "fieldset-1"). The sets always contain the same fields, but enumerated.
What happens here? There is a post to the action which generates another fieldset and redirects back to the same page, where it renders all fieldsets. Important: the result type is "tiles"! I guess this is what makes it difficult.
Now I want to dynamically add an anchor to this URL "thisismyaction.do", like e.g. "thisismyaction.do#fieldset-1". Use Case: User adds another fieldset, post to the action => result type="tiles" => JSP, user sees reload of the page with the new, second fieldset and gets "scrolled" to the second fieldset via the anchor. Is that possible?
I hope I could describe it properly, what I want to achieve... If there are questions, feel free to ask.
Simplest way I can think of right away is
<script type="text/javascript">
window.location.hash = "fieldset-<s:text name="latestIdOfFieldSet" />";
</script>
If you can figure out what's gonna be latestIdOfFieldSet before you render your jsp and set it in your action method. you should get what you are trying to do.
I'm improving RoR application. In this app there is a page where user can crete or edit items. This page contains form. In that form there are 11 tabs (implemented with javascript, we use bootsrap's tabbable here). Form controls are divided between 11 tabs.
There is a problem: After user submits form with wrong data in 2nd or 3rd tab, the same form is shown, and first tab is activated.
I need to solve this problem. I want not to use client side validation. All validation should be done in rails. Also I don't want to use AJAX.
So if user submits form that have wrong data in 5th tab, then 5th tab must be shown after submit, and form error messages should be placed into 5th tab. How can I do that?
I think the problem is a Javascript one - how to load up validation errors in the correct tabs?
From my perspective, it seems Rails is handling the data you send, and returns the original page your request was sent from. The problem is this does not load the correct tabs, which is JS' responsibility (front-end)
Recommendation
I would personally create an anonymous function to load up the tabs which have errors. You need to remember tabs are all HTML elements, and Rails append field_with_error wrapper around fields with errors
I don't have any experience with Bootstrap tabs, but you could do something like this:
#app/assets/javascripts/application.js
$(function() {
$('#myTab .div_with_errors:first').tab('show')
});
Assuming there are no Validation errors, the resultant html will be injected from a call to #Html.ValidationSummary
<div class="validation-summary-valid" data-valmsg-summary="true"><span>...</span>
<ul><li style="display:none"></li>
</ul></div>
and assuming you have the standard validation-summary-valid in your css (display: none;) the div will not be shown.
Thats fine but wouldnt everything work the same if #Html.ValidationSummary("...") output nothing instead of a 'hidden' div?
If the unobtrusive jquery functions are going to populate the validation summary client side, would the scripts not need a place to put the summary? Otherwise, you would have to reload the page each time and that defeats the purpose of client-side validation.
I assume it's so that client-side validation can show the div if validation fails on the client later on.
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>