Hi I'm trying to prevent this AJAX submit form function when a validation fails on one of one of the various inputs.
Edit: What I want to know exactly is what I need to include in //Adult age validation and var handleFormSubmit to stop saveForm($('#quotecriteria_form')); and performAjaxSubmit(formData, url); from occurring.
Submit function:
var handleFormSubmit = function( e ) {
e.preventDefault();
var $submit = $('button[type="submit"]');
$submit.addClass('loading');
// Save the contents of the form to session cookie
saveForm($('#quotecriteria_form'));
var formData = $('#quotecriteria_form').serialize();
var url = $('#quotecriteria_form').attr('action');
performAjaxSubmit(formData, url);
}
validation functions initialized:
IndexPageFunctions = {
init: function() {
//Validate date range
this.validateToDate();
this.validateFromDate();
//Validate adult age
this.validateAdultAge0();
this.validateAdultAge1();
this.validateAdultAge2();
this.validateAdultAge3();
//Validate child age
this.validateChildAge0();
this.validateChildAge1();
this.validateChildAge2();
this.validateChildAge3();
this.validateChildAge4();
this.validateChildAge5();
this.validateChildAge6();
this.validateChildAge7();
this.validateChildAge8();
},
One of the many validation functions:
//Adult age validation
validateAdultAge0: function() {
$('button[type="submit"]').on('click', function() {
var inputVal = parseInt( $("input[name='adultAges[0]']").val());
if (inputVal < 18) {
$("input[name='adultAges[0]']").css("border-color","red");
$("div#under18").addClass('show').removeClass('hidden');
}
});
},
Define a boolean array outside the scope of all functions with an index for each input element:
var valid = [false,false,false...];
Set the original value to false if blank input should be considered invalid or true if the field is optional. In each of your validation handlers (like validateAdultAge0) change the corresponding flag accordingly. For example if you decide to map the validity of age0 to the 0th index then:
if (inputVal < 18) {
$("input[name='adultAges[0]']").css("border-color","red");
$("div#under18").addClass('show').removeClass('hidden');
valid[0] = false;
}else{
valid[0] = true;
}
Like someone in the comments pointed out, if the logic is the same for each of these functions you should be using an argument to specify the target input, not creating an entirely new function but I won't get into that here.
In handleFormSubmit you'll just need to check if all the flags in the valid array are set to true, if any one is false you can return:
for(var i=0;i<valid.length;i++){
if(!valid[i]){
return;
}
}
Related
I want to store values from a form input field that has a tags input functionality using select multiple and automatically retrieve them back after the form was sent. Basically, what I am trying to achieve is to just keep them in the input field after form submission. With them being tags, this adds convenience to the user since you can just add/delete some of the inputs and reload the page.
I have successfully written a piece of code that stores the array in sessionStorage after clicking the submit button, where pmids[]is the id of the select element:
function store() {
var select = document.getElementById('pmids[]');
var pmids = [...select.options]
.filter(option => option.selected)
.map(option => option.value);
sessionStorage.setItem("pmids", JSON.stringify(pmids));
}
I am struggling with getting the values back into the form field though, this attempt does not seem to work:
var storedPmids = JSON.parse(sessionStorage.getItem("pmids"));
if (storedPmids !== null) {
document.getElementById("pmids[]" options).each(function() {
for (var i = 0; i < storedPmids.length; i++) {
if (this.value == storedPmids[i]) {
this.selected = true;
}
}
});
}
Speaking of this line:
document.getElementById("pmids[]" options)
This is not how you access the options of a <select> element. Instead you should call:
document.getElementById("pmids[]").options
Furthermore, each is a jQuery method. The vanilla JS equivalent of each is forEach, which, in fact, only works with arrays and nodelists. Hence you need to convert your options collection into an array first:
var options = Array.from(document.getElementById("pmids[]").options);
Finally, this inside forEach refers to the window object, so you need to use a callback function with a parameter. Full code:
var storedPmids = JSON.parse(sessionStorage.getItem("pmids"));
if (storedPmids !== null) {
var options = Array.from(document.getElementById("pmids[]").options);
options.forEach(function(option) {
for (var i = 0; i < storedPmids.length; i++) {
if (option.value == storedPmids[i]) {
option.selected = true;
}
}
});
}
To customize a validator of dojo NumberTextBox, dojo ValidationTextBox... I need to store the default validator somewhere in the js context and to be able to invoke it later ; the custom validation depends on the result of the default validator.
It is possible to do it in this way and can you help me doing it ?
Thanks a lot
A sample of code :
var djNumberTextBox1 = dijit.byId('#{id:djNumberTextBox1}');
djNumberTextBox1.validator = function() {
var valide = true;
//here I'd like to invoke the default (old) validator (something like next line)
//var valide = djNumberTextBox1.validate();//but this causes a too much recursion because validate() references the current function
//customisation depending on the default (old) validator result
var djButton1 = dijit.byId('#{id:djButton1}');
if(!valide){
djButton1.setDisabled(true);
}else{
djButton1.setDisabled(false);
}
return valide;};
can you try the following code:
var djNumberTextBox1 = dijit.byId('#{id:djNumberTextBox1}');
// store the validator in _oldValidator
djNumberTextBox1._oldValidator = djNumberTextBox1.validator;
djNumberTextBox1.validator = function() {
var valide = true;
// Run the old validator
valide = djNumberTextBox1._oldValidator();
//customisation depending on the default (old) validator result
var djButton1 = dijit.byId('#{id:djButton1}');
if(!valide){
djButton1.setDisabled(true);
}else{
djButton1.setDisabled(false);
}
return valide;};
Edit 1:
Passed arguments to the validator function.
var djNumberTextBox1 = dijit.byId('#{id:djNumberTextBox1}');
// store the validator in _oldValidator
djNumberTextBox1._oldValidator = djNumberTextBox1.validator;
djNumberTextBox1.validator = function(value, constraints) {
var valide = true;
// Run the old validator with arguments
valide = djNumberTextBox1._oldValidator(value, constraints);
//customisation depending on the default (old) validator result
var djButton1 = dijit.byId('#{id:djButton1}');
if(!valide){
djButton1.setDisabled(true);
}else{
djButton1.setDisabled(false);
}
return valide;};
Edit 2:
I think for NumberTextBox the validate() is called.
var djNumberTextBox1 = dijit.byId('#{id:djNumberTextBox1}');
// store the validate in _oldValidate
djNumberTextBox1._oldValidate = djNumberTextBox1.validate;
djNumberTextBox1.validate = function() {
var valide = true;
// Run the old validate
valide = djNumberTextBox1._oldValidate();
//customisation depending on the default (old) validate result
var djButton1 = dijit.byId('#{id:djButton1}');
if(!valide){
djButton1.setDisabled(true);
}else{
djButton1.setDisabled(false);
}
return valide;};
Yes, you can use use 'single tone object', or a property of the current object to add any information usefull for "validation" and re-access the value when you need it from NumberTextBox.
I wrote javascript code and added it as a form on load event of entity(contact). In that Code I want to navigate from the opening form to another form.
For previous developments, I'm trying to get the id of the opening form which I need in order to navigate.
Code as shown below.
var id = Xrm.Page.ui.formSelector.getCurrentItem().getId();
if (itemid != null)
Xrm.Page.ui.formSelector.items.get(id).navigate();
Xrm.Page.ui.formSelector.getCurrentItem() function returns a null value. It doesn't get the item so I can't get the value. What's wrong with that code, what am I missing?
Thanks for replies in advance.
You are assigning the value to id variable but checking itemid in your IF condition.
In if condition just replace the if (itemid != null) with if (id != null)
To test your JavaScript. You can run following function:
var formItem = Xrm.Page.ui.formSelector.getCurrentItem();
if (formItem != null)
{
var itemId = formItem.getId();
var itemLabel = formItem.getLabel();
alert(itemId + " | " itemLabel);
}
else
{
alert("Unable to get current form");
}
Finally, to switch between form, following is very useful function which takes the form name as parameter. you can make changes to use form Id if you like.
function redirectToForm(formName) {
var currentForm = Xrm.Page.ui.formSelector.getCurrentItem();
if (currentForm != null) {
if (currentForm.getLabel().toLowerCase() != formName.toLowerCase()) { //make sure it's not already this form
var availableForms = Xrm.Page.ui.formSelector.items.get();
for (var i in availableForms) {
var form = availableForms[i];
if (form.getLabel().toLowerCase() == formName.toLowerCase()) {
form.navigate();
}
}
}
}
}
In My case, i prefer send the form name as parameter of a kind function such as constructor via load form function.
in the javascript code:
var Formname = "Default";
function Initialize(formname)
{
Formname = formname;
}
In customization of Form, in the onload function, you set this variable and this way remove the dependece from for selector component.
I hope that this solution can help many.
I took it up a notch and wrote the following post. You might find it interesting.
http://totbcrm.blogspot.co.il/2014/08/working-with-multiple-forms.html
As my app is growing, I'm finding more need for more effective form validation. I personally don't like the angular built in validation that evaluates on field change. And there are always things it won't account for like verifying that a youtube video id is valid. Currently I'm doing validation in each forms controller. I have a function that looks like this. Each field has a message and if there is an error the message will appear red using ng-class.
$scope.validate = function (callback) {
// reset default messages
setMessages();
// create shorter references
var item = $scope.item,
message = $scope.itemMessage;
// title exists
if (item.title === '') {
message.title.message = 'You must give your item a title.';
message.title.error = true;
message.errors += 1;
}
// extract and clear video id with youtube api
if ($scope.temp.video !== undefined && $scope.temp.video !== '') {
var id = '';
var url = $scope.temp.video.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
if(url[2] !== undefined) {
id = url[2].split(/[^0-9a-z_]/i);
id = id[0];
} else {
id = url;
}
$http.get("http://gdata.youtube.com/feeds/api/videos/" + id)
.then(function (res) {
$scope.item.video = id;
}, function (res) {
message.video.message = 'That is not a valid youtube video.';
message.video.error = true;
message.errors += 1;
$scope.item.video = '';
});
}
if (message.errors === 0) {
callback();
}
};
and then my actual form submission function calls $scope.validate(); passing it a function containing the $http.post(). The two major problems I see are that my callback isn't promise base so there's no guarantee it won't be called when an error exists and I've read again and again to keep large chunks of logic outside of your controller. I haven't found great examples of how this should be done but it must be a common problem.
You can still use Angular's built-in validation and have it not evaluate unless the form has been submitted:
http://scotch.io/tutorials/javascript/angularjs-form-validation#only-showing-errors-after-submitting-the-form
Essentially you set $scope.submitted = true when the form is submitted and set a conditional check so that error messages and classes are only shown when $scope.submitted is set.
how is my values not passing for ajax using trim and val. The issue is that when I check it using trim and val the values get check if there was anything typed if there is nothing then it sends to validation false if there is something it will hide the validate. All works bu the values do not make it and I get a new row without values. What am I missing from my function to pass my values. Here is the code:
var validation = "";
var values = {};
if ($.trim($("#name").val()) === "") {
$("#validateName").show();
validation = "false";
} else {
$("#validateName").hide();
}
if ($.trim($("#news").val()) === "") {
$("#validateNews").show();
validation = "false";
} else {
$("#validateNews").hide();
}
if(validation == "false"){
return false;
}
values['addnews'] = '';
$.ajax({
// Rest of the code //
This is how it was previously passed. Here is the code:
$.each($('#add-news-form').serializeArray(), function(i, field) {
if((field.value == 0)){
validation = "false";
}
values[field.name] = field.value;
});
What am I missing from my ajax function to pass the values?
If you want to assign the name input text to the values object, you can do it like so:
values['name'] = $.trim($("#name").val());
Ideally you shouldn't have this trim statement twice, you should store the trimmed value in a variable and use that variable in both your validation and assignment sections.
Then make sure you're passing 'values' in the data param of your ajax call:
$.ajax({
data: values
// rest of your ajax code
});