We Keep Coding

How to override the crowd-html submit button to include additional data

I'm working on a fairly simple form using crowd-html elements, which makes everything very simple. As part of our study, we want to see how workers interact with the form, so we have a bunch of basic JS logging. That is all prepared as a JSON and the idea is to log it using AWS API Gateway and AWS Lambda. The code all seems to work in unit tests, but not in the real form. I am trying to do this:
document.querySelector('crowd-form').onsubmit = function (e) {
if (!validateForm()) {
window.alert("Please check the form carefully, it isn't filled out completely!");
e.preventDefault();
} else {
let event_data = {
'specific_scroll_auditor': auditor_scrolled_pixels_specific.submit_callable(),
'specific_clicks_auditor': auditor_clicks_specific.submit_callable(),
'mouse_movements_total': auditor_mouse_movement_total.submit_callable(),
'on_focus_time': auditor_on_focus_time.submit_callable(),
'total_task_time': auditor_total_task_time.submit_callable(),
'focus_changes': auditor_focus_changes.submit_callable()
};
log_client_event('auditors', event_data);
post_event_log()
}
}
Note that the validation bit works, but the logging does not. I've tested post_event_log() on it's own, and that works just fine, so it seems like either 1) for some reason I never get to that else clause, or 2) the submission happens more quickly than I can call the logging functions. (but why, since the validation works?)
I also tried this, borrowed from the turkey code (https://github.com/CuriousG102/turkey) which was our inspiration.
$(window).ready(function () {
window.onbeforeunload = function () {
let event_data = {
'specific_scroll_auditor': auditor_scrolled_pixels_specific.submit_callable(),
'specific_clicks_auditor': auditor_clicks_specific.submit_callable(),
'mouse_movements_total': auditor_mouse_movement_total.submit_callable(),
'on_focus_time': auditor_on_focus_time.submit_callable(),
'total_task_time': auditor_total_task_time.submit_callable(),
'focus_changes': auditor_focus_changes.submit_callable()
};
log_client_event('auditors', event_data);
post_event_log()
}
});
That also doesn't work. I would prefer to do this in some simple way like what I have above, rather than completely rewrite the submit function, but maybe I have to?

your custom UI is placed inside a sandboxed iFrame by Ground Truth. It does that only for the real job, and not for previews (you're code might work while previewing the UI from AWS Console). The sandbox attribute on the iFrame goes like this
sandbox="allow-scripts allow-same-origin allow-forms"
Refer https://www.w3schools.com/tags/att_iframe_sandbox.asp for descriptions. Ajax calls are blocked regardless of the presence of allow-same-origin (not that you could change it in any way). See for a thorough explanation IFRAME sandbox attribute is blocking AJAX calls

This example might help.
It updates the onSubmit function to do some pre-submit validations.
https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/blob/master/images/keypoint-additional-answer-validation.liquid.html
Hope this helps. Let us know if not.
Thank you,
Amazon Mechanical Turk

Is it fine to use submit and ajax at the same time?

I am doing CRUD for our website. Our implementation is to use submit but in some cases I need to pass data from JS file to my controller (BTW I am using Codeigniter) so I am now thinking if it is standard to use it at the same time. So far it works for me.

In my experience, pass it all through JS and basically do below. Note it's about as pseudo code as possible. You will need to make changes for it to even compile.
$("#submit").on('click', function(e) {
e.preventDefault();
if(normal_stuff()){
$(this).sumbit();
} else {
fancy_stuff();
}
});

How to use HTML form.checkValidity()?

Reading a website's source code that uses MVC, I struggled trying to understand some of it.
Code snippet of the view:
function submitForm (action) {
var forms = document.getElementById('form')
forms.action = action
if (forms.checkValidity()) {
forms.submit()
} else {
alert('There is still an empty field')
}
}
I want to execute some code if the form is missing certain inputs.

checkValidity() is a HTML5 method and
When the checkValidity() method is invoked, if the element is a candidate for constraint validation and does not satisfy its constraints, the user agent must fire a simple event named invalid that is cancelable (but in this case has no default action) at the element and return false. Otherwise, it must only return true without doing anything else.
Please learn more about how to use form validation constraints here.
There are number of useful methods you can use, customize and even build custom validation methods.
You also can find basic explanation and examples in w3schools.
Hope this helps.

For Me this works in jQuery
$('#formSection')[0].checkValidity();

just use a required
Example
<input type"text" id="id" required>
if you press the submit button there an alert text saying PLEASE FILL OUT THIS FIELD

How can I determine if all business rules are met in an entity form in Dynamics CRM 2013?

I have a form with two fields
e-mail
telephone
and a business rule that validates that at least one of them is set. There is a Silverlight application in the CRM that needs to know if the form can be saved or not. This should be done without saving it, thus invoking save() and catching exceptions is not an option. I can invoke Javascript from the Silverlight application, so a JS solution would be fine, too.
How can the SL application (or a JS function) know whether or not the form can be saved?
Happy coding
Arne

You say your business rule "validates" that one or the other is filled in. What action does it take if this is the case? I can think of several approaches to this, such as testing if one is NULL, make the other required.
You could just test to see if both are null, and show an error message against one or both. Displaying an error message from a rule will block saving of the record. Whether this will be enough to block your SL app from trying to save it as well, I'm not sure.

I solved the problem. In case this helps someone, I created business rules that make fields mandatory when some conditions are met. Then I created a JS function that checks if all fields that are mandatory are actually filled. This function did not work correctly for me. Here is the working version:
function IsAllMandatoryFieldsPopulated() {
var populated = true;
Xrm.Page.data.entity.attributes.forEach(function (attribute, index) {
if (attribute.getRequiredLevel() == 'required') {
if(attribute.getValue() === null) {
populated = false;
}
}
});
if (populated)
return '';
return 'Put your validation message here';
}
It did not work because of some hassles you get when you call this function form SL, but that is out of scope for this question. Hope this helps someone.

Validating e-mail from specific domains with RSV jquery plug-in

I'm trying to use Ben Keen's RSV Jquery plug-in to validate an e-mail address submitted through a registration form: users are only allowed to submit an e-mail address that belongs to a specific domain. I thought that using the plugin's reg_exp rule could be a solution, but I can't get it to work.
I'm a jquery newbie, so I'm probably making some very silly mistake: can someone point me to the right direction?
Here's the code I'm trying to use, adapted from one of Keen's demo:
<script type="text/javascript">
// a custom onComplete handler to prevent form submits for the demo
function myOnComplete()
{
alert("The form validates! (normally, it would submit the form here).");
return false;
}
var rules = [];
// standard form fields
rules.push("reg_exp,reg_exp_field1,/#mydomain\.tld$/gi,Please enter your valid e-mail (e.g. \"#mydomain\.tld\")");
$(document).ready(function() {
$("#demo_form3").RSV({
onCompleteHandler: myOnComplete,
rules: rules
});
});
</script>
Using the code above, when I submit a valid e-mail address, that is an address ending with #mydomain.tld I always get an alert. What am I doing wrong?

I have written RSV for many lines of code. It's very powerful.
However, you used it incorrectly.
you should define a customized function instead of its default email-format validation method.
you should put that "customized function" mentioned above into the validation array, but not put it in "myOnComplete" method, this method only called when all the validations are passed.
in RSV, a customized function only should return "true"(when passed) or "an Array"(when failed). but in the example above, you implemented as "return false".
Whatever, you have solved your problem in another way. :-) that's good.

Never mind, after further researche I found a simpler solution: following the advice in this forum thread I used jqueryValidate instead of rsv plug-in and added custom validate method.
I'm posting here my solution, maybe it could be useful for some other jquery newbie like me!
$(document).ready(function(){
$.validator.addMethod("gmail", function(value, element) {
return this.optional(element) || /^[\w-\.]+#(gmail\.com|yahoo\.com)+$/i.test(value);
}, "Email address must contain gmail or yahoo addresses.");
$("#register_member_form").validate();
});