MonoRail: how to remove prototype validation? - validation

I'm maintaining an application with monorail, and we decided to change the validation method for the Jquery one. So far so good, but... the problem i'm having is that i can't get rid of the reference to the previous validation method which is prototype.
Thing is that a Javascript is always placed after the tag forms i create.
<script type="text/javascript">
if (!window.prototypeValidators) prototypeValidators = $A([]);
var validator = new Validation('form1', {onSubmit:true, focusOnError:true, stopOnFirst:false, immediate:true, useTitles:true});
prototypeValidators['form1'] = validator;
</script>
I haven't been able to find clear documentation about monorail validation methods.
And this turns to produce some errors on the browser like so:
$A is not defined
[Break On This Error] if (!window.prototypeValidators) prototypeValidators = $A([]);
Any help or pointers in the right way for documentation about this or how to remove this kind of validation from monorail, will be greatly appreciated.
Thanks in advance
MetalGeorge
PS. i gotta say i'm fairly new to monorail

You can switch to jQuery generation (default is Prototype as you noted) with the JSGeneratorConfiguration property in the Monorail config. See http://hammett.castleproject.org/?p=238 for reference.
Or you can get rid of form validation generation completely by replacing:
$Form.FormTag("%{action='LoginAction'}")
...
$Form.EndFormTag()
with a regular form tag:
<form method="post" action="$Url.For("%{action='LoginAction'}")">
...
</form>

Related

Dijit form stops validating when mvc Group is used in it

I have a page which uses dijit/form/Form to validate all of the form widgets in it.
Validation works correctly if I put widgets directly under the Form (tag).
Once I surround the widgets with a dojox/mvc/Group (within the form), Form validation stops completely and none of the widgets seem to validate when I call Form::validate().
Debugging the Dojo code shows that nested widgets are never considered validatable in the Form so when I surround widgets with Group they get excluded from validation.
Is there a workaround for this?
AFAICT from dijit/form/_FormMixin#_getDescendantFormWidgets() and dijit/_WidgetBase#getChildren(), the issue can be solved by adding data-dojo-mixins="dijit/_Container" to the element having data-dojo-type="dojox/mvc/Group".
Also (though I'm not sure if it meets your requirement), dojox/mvc/tests/test_mvc_new_loan-stateful.html example shows form validation solution with dojox/mvc.
Hope it helps.
Best, Akira
It seems like there is no easy way to solve this with dijit/form/Form. At the very least, it should be subclassed or monkey-patched to make it consider nested widgets.
However, it seems that dojox/form/Manager handles nested widgets properly, so I have switched to it.
Switching to Manager required some refactoring since it cannot be simply converted into an object with dom-form (dijit/form/Form can be converted).
HTML code before:
<div
id="_pg_detailForm"
data-dojo-type="dijit/form/Form"
encType="multipart/form-data"
action="" method=""
>
... form widgets (surrounded with MVC Groups...etc)
</div>
After:
<form id="_pg_detailForm">
<div
id="_pg_detailFormManager"
data-dojo-type="dojox/form/Manager"
>
... form widgets (surrounded with MVC Groups...etc)
</div>
</form>

Razor #if inside <script> is rejected by VS11

Is the following markup incorrect, or is it a bug in the Razor engine in MVC4? Either way, what's the best workaround?
The entire content of View1.cshtml is shown. It compiles fine, but the Intellisense error highlighting is annoying. (Included as an image so you can see how the syntax is rejected by VS11.)
Hote that the #: syntax (instead of <text></text>) isn't accepted either.
It's a little tricky to mix JavaScript with Razor. Personally, I find it easier to always separate these two guys by using either Razor #function or Razor custom #helper.
Here's a simple example:
<script type="text/javascript">
function btn_clicked() {
#generateMyJavaScript()
}
</script>
<a href="javascript:void(0)" onclick='btn_clicked()'>Click on me</a>
#functions {
private MvcHtmlString generateMyJavaScript()
{
string jsBuilder = string.Empty;
if (true)
jsBuilder = "alert('Hey!');";
return MvcHtmlString.Create(jsBuilder);
}
}
I noticed strange behavior of the syntax highlighter too. This is not really an answer but:
I try staying away from mixing model data into javascript. Although powerfull it is a bit spaghetti-like.
Also I try to have as little as possible tags in the html. I use js includes and jQuery $(document).ready(function () ... functions inside those.
There you can extract the JSON data from the data attributes and base javascript decisions on those.
(Wanted to write this as a comment but didn't find the way to do that, sorry for the debump)

Why does form validation not work in MVC3 partial views?

Anybody? There is another question regarding this but the only answers were to code up some javascript validation, which also refuses to work on my partial view ("$ is not defined").
Anyway, I don't want to use javascript I just want simple validation for required fields that cannot be left blank, number fields that require ints, etc.
Can anyone shed some light on validation and partial views?
I suspect that you are loading those partial views using AJAX. If this is the case you will need to manually invoke the $.validator.unobtrusive.parse method once you inject the new contents of the partial into the DOM as explained in this article.
Brad Wilson also discussed this in his blog post:
The unobtrusive client validation script automatically parses the
initial set of HTML for validation rules when the page has finished
loading. If your page dynamically adds new HTML content (perhaps
throught Ajax or through client-side application code), you may wish
to parse that new HTML for client validation on the new HTML elements.
To parse new HTML, you can call the
jQuery.validator.unobtrusive.parse() method, passing it a selector for
the HTML that you would like to be parsed. You can also call the
jQuery.validator.unobtrusive.parseElement() function to parse a single
HTML element.
As far as the $ is not defined error you should make sure that you have included the proper scripts:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Also make sure you are not referencing any of the Microsoft*.js scripts. They are obsolete and should no longer be used in ASP.NET MVC 3.
Of course that's only a supposition, you haven't shown any code so we cannot know what you are doing.
I'm having the same problem and i found that it's not possible to call $.validator.unobtrusive.parse() on the same form twice.
When loading the form initially from the server the form is parsed automatically by the unobtrusive library. When you add an input element dynamically to the form and call $.validator.unobtrusive.parse() again, it won't work. The same goes for parseElement().
So before you call $.validator.unobtrusive.parse, remove the original validator and unobtrusive validation from the form like so:
success: function (html) {
$("#div-id").append(html);
var form = $("#div-id").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($("#editorRows"));
}

jQuery .NoConflict Script Load

I am trying to use jQuery in a highly conflict environment. .noConflict() doesn't work and I am trying to do something like
<script type="text/javascript">
document.write( document.write(unescape("%3Cscript src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
jQuery.noConflict();
var $ = jQuery;
</script>
Any ideas how to fix this ?
Are you sure it has nothing to do with the fact that you have:
document.write( document.write(unescape(...longstringhere...)); // Missing final close paren?
That would cause an error and then noConflict wouldn't work.
Also, do you need to be using Prototype and jQuery at the same time? The whole purpose of jQuery.noConflict() is to NOT set the jQuery variable to $ because Prototype uses it (I'm sure there are other reasons, but that's the main one in this case). jQuery and Prototype aren't good friends, usually.
Finally, are you absolutely positive (assuming you don't have the syntax error in your real code) that jQuery is getting loaded?
Did some quick research. Check this link and see if it helps any:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Basically, you might have to call jQuery first, and you will have to call Prototype BEFORE you use noConflict()
Don't use $ - that is the source of the conflicts. Substitute jQuery wherever you'd normally use it, like so:
jQuery('#my-id')
jQuery('.my-class')
and so on

Prototype framework / call from button

I thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!

Resources