Client Side Validation with RequireJS

[darthvoracious]

Hi,

I have a project that uses RequreJS. We have a lot of custom java script validation. We have decided to use EA to migrate our validation to the model to make the validations unit testable. We are having a hard time getting client side validation to work in this configuration.

In issue #48 HydrateEfficiently documented a way to get EA working with RequireJS. I have configured our project to use EA as he suggested but I can't seem to get client side validation working.
In issue #45 you mentioned that you have not tested EA with RequireJS.

I am wondering if you or anyone else has got EA to work with client side validation with RequireJS. is there additional configuration needed on top of what HydrateEfficiently documented?

Any help would be greatly appreciated.

Thanks -Chris

[jwaliszko]

Hi,

I'd like to help, but unfortunately I have no experience in this matter. @HydrateEfficiently is the only person I know who has been working on this configuration, so maybe he will be able to give any hint.

Regards

[jwaliszko]

In general case of troubleshooting, what I can say, is that for client-side EA to work, there must be few steps accomplished, despite the fact RequireJS is there or not. Especially check the step 2 (are the validators wired up in Global.asax?) and 3 (is the expressive.annotations.validate.js script added below jquery validation files and finally available on your page?). If this is done, check the web console if there are any errors reported. After basic setup works as expected, then try to wire it up with RequireJS.

[darthvoracious]

Thanks for the quick response. It's appreciated.

We have wired up the validator in our Global.asax, the expressive.annotations.validate.js is loaded and available. It can bee seen in Chome's web developer console.
We do get some errors in the console.

expressive.annotations.validate.js?v=1.0.0.0:56 No dependencies of QuoteInputSections[0].Mileage field

Here is our model property with the annotation. [RequiredIf("Include == true", ErrorMessage = "*")] public int? Mileage { get; set; }

We have added the following script in the script association with our action. We can see that it is being executed.

ea.settings.apply({ debug: true, dependencyTriggers: '@triggers' });

Any guidance would be appreciated. If there is any more information you need let me know.
-Chris

[jwaliszko]

This message: "No dependencies of QuoteInputSections[0].Mileage field detected." is not an error. It's an information, logged when debug flag is set to true, which says that there are no any expressions dependent on the value of this field to be re-evaluated. If such a message is invoked it means that the script logic is running. Where is the problem?

[driscollwebdev]

The problem we've discovered is that the callback passed to $.validator.unobtrusive.adapters.add that calls the buildAdapter method is not firing, and thus the adapters are not being built. It's unclear to me whether that's an issue to do with requireJS or an issue with jquery.validate.unobtrusive.js

[jwaliszko]

From what I see, jquery.validate.unobtrusive.js works on the input elements with data-val="true" attribute:

$(selector).find(":input").filter("[data-val=true]").each(function () {
    $jQval.unobtrusive.parseElement(this, true);
});

Actually all the logic of client-side EA relays on data-* HTML5 attributes. Correct HTML should be genereted out of the box if you're using HTML helpers provided by ASP.NET MVC to build the form fields of your view:

<input 
    data-val="true" 
    data-val-requiredif="The Mileage field is required by the following logic: Include == true" 
    data-val-requiredif-allowempty="false" 
    data-val-requiredif-expression="&quot;Include == true&quot;" 
    data-val-requiredif-fieldsmap="{&quot;Include&quot;:&quot;bool&quot;}" 
    id="Mileage" name="Mileage" type="number" value=""
    ...

Is the output similar on your side?

[driscollwebdev]

I was able to figure out a workaround for the issue; upon loading the EA library via requireJS it is necessary to make the following calls:

         $('form').removeData('validator');
         $('form').removeData('unobtrusiveValidation');
         $.validator.unobtrusive.parse('form');

So, the entire thing would look like this, assuming that the require.config shim for ExpressiveAnnotations is setup to export ea:

    require(['ea'], function(ea) {
         $('form').removeData('validator');
         $('form').removeData('unobtrusiveValidation');
         $.validator.unobtrusive.parse('form');
    });

[jwaliszko]

Thank you for the feedback. Good you've managed to make it working. I believe it will be a valuable hint for other people facing similar issue.

Regards