inside of
$('form').parsley().on('form:validate', parsleyForm => {
// I want to parsleyForm.reset() to clear all error messages on fields
})
Is there is a method which currently does this?
Yes, just call this:
$('form').parsley().reset();
http://parsleyjs.org/doc/#psly-usage-form <= In the Methods section.
Related
I am looking for a way to know the source of the event in angularjs routing. Here is the scenario I am trying to solve. When url changes I want to know whether the change was caused by a browser back button or not. I thought I can do like this
$scope.$on('$routeUpdate', function (event) {
//if source is back button do this stuff
// if not do this
});
But the event object doesn't have a source information. Did I miss something here? Is there a better way to do it?
Instead of $routeUpdate use '$locationChangeStart'
Here's the discussion about it from the angularjs guys: https://github.com/angular/angular.js/issues/2109
Example:
$scope.$on('$locationChangeStart', function(event) {
if ($scope.form.$invalid) {
event.preventDefault();
}
});
I have this scenario where a field is invalid due to another selection on the form. When that selection changes I want to revalidate. I tried calling $setViewValue on the field when the selection changes, but that doesn't refire the validation. Any ideas?
I have a hack working, but I would prefer a clean solution.
I ran into the same issue and found a workaround/feature that appears to be undocumented. If you need to trigger ngModelController to revalidate, you can either do:
ngModelCtrl.$setViewValue(value, 'your event name', true);
or if you don't need to update your model value
ngModelCtrl.$commitViewValue(true);
The true in both cases above is a flag for revalidation. Without this flag, the issue I was running into was that if the model value does not change, then angular simply skips the validation. I am using this way to manually mark a custom control as $dirty
Source:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1843
Write a directive, say validation, and place it on your field in the definition of this directive in the:
link:function(scope,element,args){
element.bind('onfocus',function(){
// Your logic
})
// Similarly, bind other relevant events like key presses, etc.
}
Put a ng-change on your select and broadcast an event in it:
$rootScope.$broadcast("selectChangedEvent");
Then, in a directive you have placed on your field, simply put in the link function:
$rootScope.$on("selectChangedEvent", () => ngModelCtrl.$validate());
$validate runs each of the registered validators of your field.
I have a Grid panel containing records which, on-click, will be loaded into a Form panel for editing.
On "close" of our form panel, we're calling myForm.getForm.reset(), which seems to reset the record but the values in the form fields themselves persist.
// Load record
me.down('form').loadRecord(record);
// Close
me.down('form').getForm().reset() or me.down('form').reset()
Please advise how to also clear values in the form upon resetting our record.
Do you have trackResetOnLoad set to true for the form? If so, what you really want is it set to false.
Maybe you need set 'resetRecord' parameter into 'reset()' method for unbind any record set by 'loadRecord' method.
Example:
me.down('form').getForm().reset(true)
You can override the default form panel to add this functionality. Add the following to your code:
Ext.override(Ext.form.Panel, {
clearForm:function(){
Ext.each(this.getForm().getFields().items, function(field){
field.setValue('');
});
}
});
You can then clear a form using:
myForm.clearForm()
Where myForm is your form panel.
The reset() method just resets the form back to the last record loaded.
If you want to maintain trackResetOnLoad=true (e.g. so you can use the form's "dirtychange" event) another approach is to take a copy of the values just after the form is created like var originalValues = myForm.getFieldValues(); then simply restore those values using myForm.setValues(originalValues); instead of calling myForm.reset(...);
You can try this...
this.up('form').getForm().reset();
I have many events bound to elements in my view, though when I use stickit js to change values in my view by altering the model it doesn't trigger an onChange event.
Is there a way that I can trigger an onchange event for the current model:element after the setting the value in the model without having to write a handler for every binding? This would be for all form elements, input/select/textarea.
I want to avoid the following for each form element on the page:
bindings: {
'#foo': {
observe: 'foo',
afterUpdate: 'forceChange'
},
'#bar': {
observe: 'bar',
afterUpdate: 'forceChange'
},
...
},
forceChange: function(el) { jQuery(el).change() }
One possible hack (with version 0.6.3 only) would be to define a global handler which matches all elements:
Backbone.Stickit.addHandler({
selector: '*',
afterUpdate: function($el) {
$el.trigger('change');
}
});
Since handlers are mixed in with other matching handlers and bindings configurations in the order that they are defined, you couldn't use afterUpdate in any of your bindings without overwriting this global, all-matching handler since the bindings configurations are the last to be mixed in. You can read more about it here.
Ahhh, that comment clarifies matters. So, in Javascript when you change an input's value "manually" (whether through jQuery or through someElement.value =) the browser won't, as you noticed, fire a change event. Change events (and most other events for that matter) are only fired in response to user actions, not to Javascript.
Luckily, just as you can "manually" change a value, you can also "manually" trigger an event. In jQuery the syntax for that is:
$(yourElement).trigger('change');
If you need to control things like e.target you can read up on the jQuery trigger documentation for the details, but that's the basic idea.
You can even chain the value-changing and event-triggering together if you want:
$(yourElement).val('newValue').trigger('change');
After I added a form and loaded some data,
$f=$this->add('MVCForm');
$f->setModel('Model')->loadData(1);
$data=$f->getAllData();
the data do show up in the fields of the form, however, the $data is empty. I thought it would be the data array for the fields show up in the form. Did I miss something here?
i don't know the reason behind the design or functional behavior of this,
but you need to call the form's loadData() first.
Modifying the code you provided:
$f=$this->add('MVCForm');
$m=$f->setModel('Employee')->loadData(1);
$f->loadData(); // add this call
$d=$f->getAllData();
$b=$this->add('Button')->set('Show Me The Data');
$b->js('click')->univ()->alert(var_export($d,true));
so you can retrieve the data loaded by the model.
i am guessing that this function prepares the form's fields prior to a call to getAllData()
or maybe there is a shorter way, ATK has TONS of hidden secrets. :)
You need to use that inside isSubmitted() function. isSubmitted will automatically call the loadData(). Here is typical use:
$form=$this->add('Form');
$form->addField('line','test');
$form->set('test','default value');
$form->addSubmit('Show me the data');
if($form->isSubmitted()){
$data = $form->getAllData();
$form->js()->alert(var_export($d,true))->execute();
// execute at the end is important!
// it will also stop execution.
}
$this->add('OtherElements'); // other stuff on the page,
// which we don't need for form submission logic