Hello,
I have created custion js file and included in editview. When i click save in editview, js function want to call.For this where i should call the function.
Thanks,
Karthi
Hi,
You can use some custom javascript code to edit view to validate textboxes when save button is clicked.
for example…
Simply do the following in editviewdefs.php
'includes' =>
array (
0 =>
array (
'file' => 'custom/include/Custom.js.js'
),
),
The javascript code… Custom.js
$(document).ready(function(){
$('#SAVE_HEADER').removeAttr('onclick').click(function(){
if(/*some condition to check validation){
/*
some code when validation fires.
*/
}
else{
var _form = document . getElementById('EditView');
_form.action.value = 'Save';
if (check_form('EditView'))
SUGAR . ajaxUI . submitForm(_form);
return false;
}
})
});
</script>Hope you will get the idea…
1 Like
^ above is a good starting point, but it doesn’t seem to actually disable the submit action…
So whatever validation code you may have in :
/*
some code when validation fires.
*/
Is great, but it won’t stop form submission
yes @rober_sinclair it wont stop submit unless in your custom JS document ready, you return False in the OnClick of the Save buttons of edit view in header and footer. That way once your validation passes, call the Save button code as
var _form = document.getElementById('EditView');
_form.action.value='Save';
if(check_form('EditView'))SUGAR.ajaxUI.submitForm(_form);return false;
1 Like
^ cherub-chum is right. So you have to put the returns false; on the Onclick of the save button (inline js attached to the button). You can’t block it from Javascript in the footer with a simple return false;
So here’s a different implementation that goes more with the OP’s original question, the following will watch the onsubmit action and prevent it from getting submitted unless the form is 100% validated. It also doesn’t interfere with Suitecrm’s default validation schemes and you don’t have to add/remove save buttons with custom code to template. This is completely unobtrusive and will work around existing html markup.
Code sample from the video:
// Get all the forms that have a save button
var saveButtons = document.querySelectorAll('[id=SAVE');
saveButtons.forEach(function(element) {
// Remove the onclick from the button otherwise form will still get submitted as soon as we click on "Save" no matter what validation code we use below
element.removeAttribute("onclick");
// Get this button's form element
current_form = element.form;
// Listen to the submit event and then prevent it if validation failed!
current_form.addEventListener('submit', event => {
// If validation passed
if(validate_external_broker_commission()) {
console.log('Validation passed!');
// Below is the code that we got from the save button mark-up! The only difference is the event.preventDefault(); put before return false;
var _form = document.getElementById('EditView');
_form.action.value='Save';
if(check_form('EditView'))
SUGAR.ajaxUI.submitForm(_form);
event.preventDefault();
return false;
// Above is the code that we got from the save button mark-up! The only difference is the event.preventDefault(); put before return false;
} else {
console.log('Validation failed!');
event.preventDefault();
}
});
});
Video walk-through:
https://youtu.be/cn6daqxA3Sw
3 Likes
I think this is the best way to perfom validation in JS.
I’ve used to override the button in the editviewdefs.php file, and add a JS code in the view (view.edit.php)
I used this method to perform my validation in a quickcreateview, so basically, perform my validation when a contact is created in a subpannel. Only thing that change is the ID of the form.
Also note that you will have to change the code of the onclick cause in the video of @robert_sinclair its for the editview, here the code is not the same cause its the quickcreate view.
EDIT : @robert_sinclair on line current_form.addEventListener(‘submit’, event => {
You have to add getElementById, if not the full form button will not work and act like the save button.
So like this :
current_form.getElementById(“ID”).addEventListener(‘submit’, event => {
1 Like
thanks buddy its very needful
1 Like
Hi,
the below code works well, however i’ve tried to add an alert if validation fails ex:
else {
alert("validation failed!");
console.log('Validation failed!');
event.preventDefault();
}
This will produce 2 alerts probably because foreach loops over 2 Save buttons in a form.
How can i prevent this?
Many Thanks
1 Like
var saveButtons = document.querySelectorAll('[id=SAVE');
if (!saveButtons[0]) return false;
saveButtons.forEach(function(element) {
element.removeAttribute("onclick");
});
current_form = saveButtons[0].form;
current_form.addEventListener('submit', event => {
if(fileExtensionValidation()) {
var _form = document.getElementById('EditView');
_form.action.value='Save';
if(check_form('EditView'))
SUGAR.ajaxUI.submitForm(_form);
event.preventDefault();
return false;
} else {
alert('You can only upload .jpg, .png and .pdf');
event.preventDefault();
return false;
}
});
I was facing the same problem and I came up with this solution.
There is a problem in the previous code that, it is setting up two event listeners on the same form-submit event, and that was causing the issue.
I hope this will be helpful 
1 Like