I have an Single Page Application build using Angular and i am having some issues with the form.
Form is using a check box a drop down and two text boxes.
first text box (Name) has no validation.
check-Box is using a third party plugin called "iCheck".
Drop down is using a plugin called "bootstrap-select".
Validation is using a library called "Jquery Validation Engine".
The plunker is setup here
The expected behavior is. In simple words the text box and drop are required if check-box is checked.
1) On Page load because form is not dirty (none of the controls were supplied any value) if i click the save button it should hit the save function because there were no validation on the controls, hence there should be no validation message prompt on the screen.
2) If i click the check box. the drop down and the text box below becomes required. it means that both drop down and text box has conditional validation (feature of Jquery Validation Engine) which is already setup and working .
so now if i click Save, it should not hit the save function and display the validation prompt.
3) it should keep on restricting the function access and display the validation error prompt unless form controls are valid i.e. some value is selected in drop-down and text boxed is filled.
4) and if i un-check, validation described in point number 3 goes away.
But whats happening is:
a) On page load if i click the save button it does not hit the save function.
b) If i click the check box it still does not hit the save function and validation error prompts are display on both drop down and text-box which is fine thats how it should behave.
c) When is fill the required text box it makes the form ng-valid and it hit the
save function how ever the drop is still in ng-invalid.
d) Even if i select some thing from the drop down the validation prompt remains on the drop down and it still hits the save functions.
e) (Not that much worried about this issue) lastly want to setup a custom value in the drop down that should act as default e.g. "--Select One--" and if the default is selected it should be considered as nothing is selected and it should be considered as invalid when validation is active.
all of this code is in dashboard.html and dashboard.js since i am using plugins so i needed directives to work with them properly. Directives for check-box, Select and Validation are in dashboard.js under the controller code.
Controller code is setup like this.
(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['$scope', dashboard]);
function dashboard($scope) {
var vm = this;
vm.title = 'Dashboard2';
vm.CurrCustomer = {};
vm.CurrCustomer.Name = ""; //first text box
vm.CurrCustomer.Logic = false;
vm.CurrCustomer.SetThreshold = false;
vm.CurrCustomer.Threshold;
vm.saveChanges = function () {
alert('function called');
var NewCustomer = vm.CurrCustomer;
// submit NewCustomer to DB.
};
$scope.toggleSelection = function () {
vm.CurrCustomer.SetThreshold = !vm.CurrCustomer.SetThreshold;
};
}})();
Related
I have order form which contains combobox field. When user select specific value, system enables new set of fields in form.
This part of code looks like:
if (action.result.data.field == "1") {
Order.query('fieldset[itemId="set1"]')[0].enable();
Order.query('fieldset[itemId="set2"]')[0].show();
}
But if user open editing form with already selected specific value, system doesn't show this set of fields. I need system to check specific value on opening the edit form. What class I should use?
Have a look at this ExtJS example. May be this can guide you. In your case, may be you have to listen to form.Panel render event and set the form fields based on the values in the record you got from server/present locally. Something like below.
onSelectionChange: function(model, records) {
var rec = records[0];
if (rec) {
this.getForm().loadRecord(rec);
}
}
load form based on record click
The application is a Web MVC application in C#. When the user is editing a record and clicks on a checkbox I want to make sure 3 fields are filled in.
On the controller I have created a clientside script which is called checkfields:
checkBoxProperties.ClientSideEvents.CheckedChanged =
"function (s,e) { checkfields(); }";
On the CSHTML I have
function checkfields()
{
alert("Value Empty");
return false;
}
When I check the checkbox I am getting the alert pop up but how do I reference the model fields and popup alert if one of the fields are empty.
You can just use JQuery to select each checkbox and query if it has been checked.
How to check whether a checkbox is checked in jQuery?
$("#myCheckBox").on("click", function () {
if ($("#myCheckBox").is(':checked')) {
Now you can show a hidden message (show a hidden label, for example), do a popup, or whatever.
I'm stuck on this issue: I'm trying to limit the number of selections a user can make from an available dropdown selection list. The list is drawn from a database, so its not a hard-coded option list. I'm currently using angularMultipleSelect, its works fine expect for this requirement.
If the user exceeds the maximum selections, I want to set the field to invalid, so that the user cannot save the form. The user should then remove one or more of the selections, until the valid selections are made, then the field should reset to valid. I've tried using:
after-select-item (a directive available with angularMultipleSelect)
ng-change
custom validation directive
None of these work. I can get ng-change & custom validation directive to work on other input fields in the same form, but not on the 'multiple-autocomplete' tag. Nothing is triggered when the user makes selections from the dropdown list.
Here is a simple sample of the code used with after-select-item method. I'm trying to limit the user to 3 or less selections from the available options in the 'cats' array.
HTML:
<multiple-autocomplete
ng-model="selectedCats"
name="selectedCats"
object-property="name"
after-select-item="afterSelectItem"
required
suggestions-arr="cats">
</multiple-autocomplete>
Controller.js:
$scope.afterSelectItem = function(selectedCats) {
var catLength = $scope.selectedCats.length;
var valid = (catLength <= 3);
$scope.myStoryForm.selectedCats.$setValidity("maxLength", valid);
};
Again, nothing gets triggered in this controller when selections are been made (checked at console).
Is there something I'm not doing right, or is there another approach I could use to meet this requirement?
Thanks.
You could try using $watch to watch for changes in your model.
E.g.
$scope.$watch("selectedCats", function (newValue, oldValue) {
var catLength = newValue.length;
var valid = (catLength <= 3);
$scope.myStoryForm.selectedCats.$setValidity("maxLength", valid);
});
This gets triggered every time that your "selectedCats" value changes as well as the first time that you initialise the value.
I am using Sitecore 7.2 with Web Forms for Marketers 2.4.
Using wffm form designer I created a form that has a droplist in it.
I want to be able to hide or unhide another field in the same form based on the selected value of the droplist. Through my research I came up with exporting the form (via form designer export) and pointing the sublayout to that exported form.
I then added and onChange event to the droplist.
<cc3:droplist runat="server" title="Country" emptychoice="True" id="field_xyz" cssclass="scfDropListBorder fieldid.%7bxyz%7d name.Country" controlname="Country" fieldid="{xyz}" enableviewstate="False" onchange="checkField()">
I then added a javascript to the bottom of the page.
function checkField() {
alert("Hello! I am an alert box!!");
var a = document.getElementById("field_xyz");
alert(a.options[a.selectedIndex].value);
var cityTextBox = document.getElementById("field_abc").parentNode.parentNode;
if (a == "United States") {
cityTextBox.style.display = "block";
} else {
cityTextBox.style.display = "none";
}
alert("Ending Script");
}
I can get the 'Hello!' alert to show every time but not the 'ending' alert and the value of 'a' is always null from what I can tell.
Is what I'm trying to do even possible in Sitecore?
I read something else that said they had a problem because of encapsulation and protection levels.
I can also confirm that when I submit the form it does show up in the WFFM reports so I know it is submitting properly.
Any help/advice/direction would be appreciated.
I've never used the export functionality so can't comment to it's effectiveness or ease of use. My suggestion would be to simply use from custom css classes and jquery on the front-end to hide/show depending on the selected value.
Create 2 new css classes under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes. Call them "hide-dependent" and "dependent-field"
Add your fields and then on the country field select "hide-dependent" as the CSS class, and for the City select "dependent-field"
Add the following Javascript to your own sites js file.
The code will bind a handler to fire onchange, checked the selected value and then hide/show all field with the dependent-field class. Specifying the chained field-border ensures that we are hiding the whole row and not just the select box.
(function ($) {
var HideDependentFied = function (value) {
var condition = (value == "USA");
$(".dependent-field.field-border").toggle(condition);
};
$(document).ready(function() {
var $field = $(".hide-dependent.field-border select");
$field.on("change", function() {
HideDependentFied(this.value)
});
HideDependentFied($field.val());
});
})($scw);
The above code is using an Immediately Invoked Function Expression and passing is $scw, which is the jQuery variable used by WFFM.
You may also want to fire the function on document ready, to ensure the field is hidden on load and only shown when the appropriate value is selected.
I have a dropdown which has countries and in the same form on 2nd line I have ZipCode texbox. I want to limit the minLenght of the zipcode field dynamically. For example If US is slected zipcode should not be less than 5 and for other countries some other minLength Limit. My form uses a parsley validator
I wrote below function onChange event of my country dropdown
function setZipLimit() {
alert("in Zip limit" + document.getElementById("billingCountry").value);
if (document.getElementById("billingCountry").value == "US") {
alert("I am in US");
$('#billingForm').parsley('destroy');
$('#billingPostalCode').data('minlength', 3);
$('#billingForm').parsley();
} else {
$('#billingForm').parsley('destroy');
$('#billingPostalCode').data('minlength', 10);
$('#billingForm').parsley();
}
}
But this doesnt seem to be helping. Can you please help me?
You cant just edit the Attribute, because parsley.js initially Reads the form and gets its Values. Changing them Afterwards shouldnt have any Effect.
However you can use the Parsley.js API for Javascript functions to Edit the constraints. You already used them to destroy and Build Parsley. Parsley got the following Function:
$( '#field' ).parsley( 'updateConstraint', { minlength: 6 } );
There are also some with addConstraint and removeConstraint in the Documentation:
http://parsleyjs.org/documentation.html
If your Form gets more complex and you have several of those dynamic cases, i recommend to only Destroy and Rebuild specific Parts of your Form. The Reason is (from an issue I had recently):
If you Destroy Parsley, change some Fields, build Parsley and then Destroy it again because another if Statement takes place, your previous Changes get thrown away, because Build only reads the js inbetween the Destroy and Build and reads the Form.