Develop Reference

Yii2 validate an ActiveForm with javascript

I have a working Active Form, which can be submitted, and validated via Yii PHP. However, I would like to determine if the form is valid, when clicking a Next button.
I can pass error messages to the user via this:
$("#form").yiiActiveForm("validate", true);
But this function doesn't return anything; I don't know if there are indeed any errors or not. I tried this:
$error_count = document.getElementsByClassName("help-block").length
but this does not work; the errors are counted before the UI has updated. If I press the button again, a second time, then error_count is what I'd expect.
This doesn't seem to do anything:
$("#form").yiiActiveForm("validate");
I also tried this:
$('#form').on('afterValidate', function (event, messages, errorAttributes) {}
But this is only triggered after the fact so I'm not sure what to do.
Any advice would be appreciated.

If you need to react to button you simply need to combine both events:
let isNextClicked = false;
$('.next-btn').on('click', function(e) {
e.preventDefault();
isNextClicked = true;
$("#form").yiiActiveForm("validate", true);
});
$('#form').on('afterValidate', function(event, messages, errorAttributes) {
if (!isNextClicked) {
//validation wasn't triggered by clicking next
return;
}
// reset the state
isNextClicked = false;
if (errorAttributes.length > 0) {
//there are errors so we won't let user to continue
//we can also show some alert() here
return;
}
// ... code to show the next tab of form ...
});

Query OnSubmit Issue

I am encountering an error using the query below is the snippet of the code:
$('form[action="/home/service/"]').on("click", (function(event) {
if ($("#id1").val() == "" && $("#id2").val() == "") {
alert("Invalid entry");
event.preventDefault();
} else {
$('form[action="home/service/"]').submit();
}
});
the event.preventDefault(); works as it should however its the submit. I have tried using the .off("click" , function); but this didn't work and was the same issue.
Once the preventDefault() method is fired I am unable to resubmit the form once the issues have been resolved? I have seen a few people encounter this but their fixes didn't resolve my issues.
UPDATE
this is what I have now, however I am still receiving the issue, The issue is that it works on the initial on submit however as soon as I try to resubmit with the values it appears that the submit button is locked, has anyone encountered this before? Below is my updated code:
//function on
function checkForm(event)
{
debugger;
if ($("ID1, ID2" ).val() != "" ){
return;
}
else{
event.preventDefault();
$("#alerts-row").html("<div class='alert_box red'><p>Please Ensure that you have filled in at least one item number below!</p></div>");
$('form[action="Form"]').unbind("submit", checkForm);
}
}
$('form[action="form"]').on("submit", checkForm);
Thanks,
Gavey

try putting it before the if statement
$('form[action="/home/service/"]').on("click", (function(event) {
event.preventDefault();
if ($("#id1").val() == "" && $("#id2").val() == "") {
alert("Invalid entry");
} else {
$('form[action="home/service/"]').submit();
}
});

I think that the proper way would be to use the Submit event. If you do that, then on failure to validate you would preventDefault (as you have done), and on success you wouldn't prevent the default.
There's nothing stopping you having a click event on some element that simply calls form.submit(), but you should probably consider using a <Button> instead that can submit automatically.

To resolve the issue which I was having we used unobtrusive Validation, with the help of some samples we were able to create the or statement and allowed us to post the correct validation on the form.
$(document).ready(function(){
// Register new validation adapter
$.validator.unobtrusive.adapters.addBool('minimumselect');
// Add validator to controls
$input = $("#Input1");
$input.attr('data-val', 'true');
$input.attr('data-val-minimumselect', 'Please provide either this or Number 2');
$input2 = $("Input2");
$input2.attr('data-val', 'true');
$input2.attr('data-val-minimumselect', 'please provide this or Ref Number 1');
// Refresh form - needed to pick up new validator
refreshFormValidators();
});
Thanks,
Richard

CRM 2013: Force refresh a form after save

We have a requirement to refresh the form after saving (to ensure that some hide/show logic works as expected based on a field value).
Currently the form does not automatically refresh after saving the record.
I have gone through some articles and found this reference:
http://msdn.microsoft.com/en-us/library/dn481607%28v=crm.6%29.aspx
When I try to do either of the below, it results in an infinite loop and throws a 'Callstack exceeded Max limit' error.
OnSave(context)
{
//my logic
...
...
Xrm.Page.data.save.then(SuccessOnSave, ErrorOnSave);
}
function SuccessOnSave()
{
//force refresh
Xrm.Page.data.refresh();
}
function ErrorOnSave()
{
//do nothing
}
OnSave(context)
{
...
...
//force refresh
Xrm.Page.data.refresh(true).then(SuccessOnSave, ErrorOnSave);
}
function SuccessOnSave()
{
//do nothing
}
function ErrorOnSave()
{
//do nothing
}
Can someone please explain me how to use the refresh or save method to do a force refresh of the form ??
Rajesh

I use to achieve it with following code
Xrm.Page.data.save().then(
function () {
Xrm.Page.data.entity.attributes.forEach(function (attribute, index) {
attribute.setSubmitMode("never");
});
Xrm.Utility.openEntityForm(Xrm.Page.data.entity.getEntityName(), Xrm.Page.data.entity.getId());
},
function (errorCode, message) {
}
);

For me this is what solved the purpose (CRM 2015)
// Save the current record to prevent messages about unsaved changes
Xrm.Page.data.entity.save();
setTimeout(function () {
// Call the Open Entity Form method and pass through the current entity name and ID to force CRM to reload the record
Xrm.Utility.openEntityForm(Xrm.Page.data.entity.getEntityName(), Xrm.Page.data.entity.getId());
}, 3000);

If you want to do a hard refresh on the form data, you will likely want to do a location reload. What I've done in the past is put the refresh logic in a function that is called when the Form is loaded (after being saved). The tricky part about this is that the function can get called if the form is auto-saved in CRM 2013. You also want to take into account that you don't want to refresh the form on the first load, since this would result in an infinite reloading loop. Here's an example:
var formLoaded = false;
function formLoad() {
if (formLoaded) {
window.location = location.href;
}
formLoaded = true;
}

You have attached the OnSave() method to OnSave event. So, logically if you call save again within the same event, the calls goes recursively.
From MSDN
Xrm.Page.data.refresh(save).then(successCallback, errorCallback);
Parameter: save - A Boolean value to indicate if data should be saved
after it is refreshed.
So, you will have to pass 'false' to this method (You just need to refresh, no save is required)

As I couldn't find the complete code for this written in a 'generically' reusable way, here goes:
var triggeredSave = false;
//Attach the OnSave Form event to this OnSave function
//and select passing of context as the first parameter.
//Could instead be attached programmatically using the code:
//Xrm.Page.data.entity.addOnSave(OnSave);
function OnSave(context) {
var eventArgs = context.getEventArgs();
var preventedAutoSave = false;
//Preventing auto-save is optional; remove or comment this line if not required.
preventedAutoSave = PreventAutoSave(eventArgs);
//In order to setup an after save event function, explicitly
//invoke the save method with callback options.
//As this is already executing within the OnSave event, use Boolean,
//triggeredSave, to prevent an infinite save loop.
if (!preventedAutoSave && !triggeredSave) {
triggeredSave = true;
Xrm.Page.data.save().then(
function () {
//As the form does not automatically reload after a save,
//set the save controlling Boolean, triggeredSave, back to
//false to allow 'callback hookup' in any subsequent save.
triggeredSave = false;
OnSuccessfulSave();
},
function (errorCode, message) {
triggeredSave = false;
//OPTIONAL TODO: Response to failed save.
});
}
}
function PreventAutoSave(eventArgs) {
if (eventArgs.getSaveMode() == 70 || eventArgs.getSaveMode() == 2) {
eventArgs.preventDefault();
return true;
}
return false;
}
//Function OnSuccessfulSave is invoked AFTER a save has been committed.
function OnSuccessfulSave() {
//It seems CRM doesn't always clear the IsFormDirty state
//by the point callback is executed, so do it explicitly.
Xrm.Page.data.setFormDirty(false);
//TODO: WHATEVER POST SAVE PROCESSING YOU REQUIRE
//e.g. reload the form as per pre CRM 2013 behaviour.
ReloadForm(false);
//One scenario this post save event is useful for is retriggering
//Business Rules utilising a field which is not submitted during save.
//For example, if you implement a Current User field populated on Form
//Load, this can be used for user comparison Business Rules but you
//may not wish to persist this field and hence you may set its submit
//mode to 'never'.
//CRM's internal retriggering of Business Rules post save doesn't
//consider changes in fields not submitted so rules utilising them may
//not be automatically re-evaluated or may be re-evaluated incorrectly.
}
function ReloadForm(preventSavePrompt) {
if (preventSavePrompt) {
Xrm.Page.data.entity.attributes.forEach(function (attribute, index) {
attribute.setSubmitMode("never");
});
Xrm.Page.data.setFormDirty(false);
}
Xrm.Utility.openEntityForm(Xrm.Page.data.entity.getEntityName(),
Xrm.Page.data.entity.getId());
//Another way of trying Form reload is:
//window.location.reload(true);
}

Use Mscrm.Utilities.reloadPage();

I found this post helpful in demonstrating the difference between Xrm.Page.data.refresh() and Xrm.Utility.openEntityForm(entityName, id).
TL;DR - if you want the screen to repaint, consider using Xrm.Utility.openEntityForm(entityName, id).

You can achieve by placing Modified On field on the form. And set visible by default property to false.
Use below JS to refresh the form
function refreshCRMFORM()
{
setTimeout(function () {
// Call the Open Entity Form method and pass through the current entity name and ID to force CRM to reload the record
Xrm.Utility.openEntityForm(Xrm.Page.data.entity.getEntityName(), Xrm.Page.data.entity.getId());
}, 1000);
}
Create On Change event on Modified on field and provide above function name.

How to show this Success message on popup

I have this code in my view.
After my database adding the message is showing perfectly but my Grid is not showing the updated result. If I keep
return true;
when I click Submit button I am getting popup window immediately and then adding to the database? This showing my updated result in the grid.

If you have return true at the end of your submit function, then the browser will go to the url in the action attribute of the form. I think you should always return false if you have taken care of the form data in the ajax call. You need to get the updated grid as part of the ajax success method.
You can't have the ajax popup and still let the form submit the normal way.
$(function () {
$('#form4').submit(function () {
...
$.ajax({
...
success: function (result) {
...
// update grid
grid_container = $("#grid").html('');
$("<table>").appendTo(grid_container);
for (ii = 0; ii < result.grid.length; ++ii) {
tr = $("<tr>").appendTo(table);
for (jj=0; jj < result.grid[ii].length; ++ii) {
td = $("<td>").text(result.grid[ii][jj]).appendTo(tr);
}
}
// show success message
alert('Saved NewServiceTypeCategory Successfully. Thank you!');
}
});
return false;
});
});
Now all you have to do is make your server side post handler return the XML with the grid data.

The AJAX request is asynchronous, so it finishes the form submit routine before the callback finishes, which might explain the result you are getting. I think there may be an async setting you can turn off so that the operation/callback must complete first.

Basing on your code and as far as i'm aware of, you have no way on loading the new data.
The reason why when you return true; the new data is being loaded is because the submit event successfully perform it's default operation which is submitting to the server and refreshing the page.
On the other hand, return false; prevents this operation (including the refresh page) and instead just run the XHR.
What you could do is:
Return the new data as a result of the
XHR and parse it accordingly.

Modifying the DOM based on an AJAX result with jQuery

I'm unsure of the best practice for modifying the DOM based on an ajax response. I'll try to let the code do the talking because it's hard to explain.
// page has multiple checkboxes
$("input[type='checkbox']").live('click', function {
var cb = $(this); // for the sake of discussion i need this variable to be in scope
$("form").ajaxSubmit({ dataType: "script" });
}
The server sends a response back, and the js gets eval'd and that means "cb" is out of scope.
What I've done so far is create a couple of helper functions:
var target = undefined;
function setTarget(val) {
target = val;
}
function getTarget() {
return target;
}
And that turns the first snippet of code into this:
// page has multiple checkboxes
$("input[type='checkbox']").live('click', function {
setTarget($(this));
$("form").ajaxSubmit({ dataType: "script" });
}
Then on the server's response I call getTarget where I need to. This seems hackish... Any suggestions?

It's unclear what you're actually trying to do, but I feel like you want to be looking at the success parameter for that AJAX call. The success callback function should execute in parent scope and do what you're looking for.
See 'success' on this page in the jQuery docs.

So what you are trying to do is get the form to submit the content via ajax whenever the user checks/unchecks a checkbox? And because there are several checkboxes, you need to find out which one triggered the submit, so you can change its value to whatever is stored on the server?
If you submit the entire form everytime, why don't you reply with all the checkboxes values, and then change each and every one of them? If not, get the server to reply with the id and the value of the checkbox, then use jquery to find the checkbox with that ID and then change it's value.

How about:
jQuery(function($) {
// give it scope here so that the callback can modify it
var cb,
cbs = $('input[type="checkbox"]');
cbs.live('click', function {
// taking away var uses the most recent scope
cb = $(this);
// disable checkboxes until response comes back so other ones can't be made
cbs.attr('disabled', 'true'); // 'true' (html5) or 'disabled' (xhtml)
// unless you are using 'script' for something else, it's best to use
// a callback instead
$('form').ajaxSubmit({
success : function(response) {
// now you can modify cb here
cb.remove(); // or whatever you want
// and re-enable the checkboxes
cbs.removeAttr('disabled');
}
});
}
});