Is there something internal with Parsley 2.0.6 that could be causing Internet Explorer's failure to include radio and checkboxes as a parsleyField.$element ?
For example, in my ParsleyConfig I have the following:
var ParsleyConfig = {
classHandler: function (parsleyField) {
var $field = parsleyField.$element;
// When looped through, contains only text type inputs,
// doesn't contain checkbox or radio type inputs.
// Happens for IE only.
console.log($field);
}
I also just discovered it works when I put IE11 in 9 or 10 rendering mode.
So it turns out to be purely a IE11 issues, not Parsley. In Parsley options I had set :hidden to not validate. IE11 was reporting my checkbox and radio buttons as hidden because they had a 0 x 0 width/height. Even though their display was set to block, IE11 only reports them as hidden.
Related
I'm using Angular UI Datepicker. It's behavior is correct on all tested browsers except IE9. On IE9 when i choose some date, then open datepicker again and click on "Clear" button(native button coming from the directive) then "null" text is shown in datepicker's input field.
I have found a related question about that issue. The problem is that in IE whenever javascript sets the input value to a variable which is null then the input field is filled up with the text "null". So the solution for IE9 is to do
document.getElementById('some_id').value = someVar || ''
instead of
document.getElementById('some_id').value = someVar;
but that solution is not applicable for my case because the value of input is being set in the code of directive and i don't want to change that code because dependency is coming from bower and can be updated in future.
The only thing i can do is to write an angular watcher for datepicker model value setting it to empty string in case when it's value becomes null or undefined, but i don't like that solution as i need to do that for each and every page where datepicker is used.
Any idea ?
By default, Parsley only handles updating a single element's class (usually the input field in which the invalid entry is). However, with Bootstrap 4 we must update both the form-group and the input field classes to render them with the validation icons. Otherwise, only the border colour is changed.
How can I use Parsley to correctly, completely style my input fields when validating user input in the client?
In order to correctly style Bootstrap 4 with Parsley, you must modify the classes of the div.form-group surrounding your input fields (assuming you want the validation icons, like I did).
According to the documentation you need to add .has-success or .has-danger to the div.form-group and then specify form-control-success and form-control-danger respectively to the input fields.
However, Parsley only supports updating the class on a single element by default. Fortunately, it supports event binding, so with a little function added to the end of your parsley.js file, we can handle updating the div.form-group styles when the user has fixed a validation error.
First configure Parsley:
errorClass: "form-control-danger",
successClass: "form-control-success"
These are the correct classes to apply to the input fields, which Parsley works on by default. Next, append the following to the parsley.(min).js file.
window.Parsley.on('field:validated', function(e) {
if (e.validationResult.constructor!==Array) {
this.$element.closest('.form-group').removeClass('has-danger').addClass('has-success');
} else {
this.$element.closest('.form-group').removeClass('has-success').addClass('has-danger');
}
});
The above will listen for when fields have been validated, and, hence update the relevant div.form-group according to the Bootstrap 4 documentation to ensure that the input field gets rendered appropriately.
I am writing protractor tests for my form validation.
I want to test that an chrome validation popup appears when a required filed is not set in the form.
When a filed is not set i get "Please fill out this field" from chrome.
I want to do something like this :
submitBtn = element(by.id('submitBtn'));
submitBtn.click();
validationMessage = ???
expect((validationMessage ).getText()).toBe('Please fill out this field');
How to get it ?
You don't need to test the internal implementations of Chrome. The Chrome developers would have had tests to cover the hiding and showing of popups.
You test that your form is written correctly by finding the element that the required attribute should be set on, and asserting that it is indeed set.
myInput = element(by.id('myInput'));
expect(myInput.getAttribute('required')).toBeDefined();
I use https://github.com/CakeDC/TinyMCE to download plugin and did follow all the step to integrate on my cakePHP project. so right now, all the textarea was successfully changed to tinyMCE editor
But when click "SUBMIT" to submit my form, page cannot submit and post data. Without loading editor my form can submit and post data.
Is any jquery problem ? please advise me.
thank you.
Bootsrab.php
CakePlugin::load('TinyMCE');
Configure::write('TinyMCE.editorOptions', array('width' => '500px','height'=>'250px' ));
Controller:
public $helpers=array('Html','Form','TinyMCE.TinyMCE');
View:
$this->TinyMCE->editor(array('theme' => 'advanced', 'mode' => 'textareas'));
echo $this->Form->input('user_requirements',array('required'=>true) );
Layout : default
loding js file:
echo $this->Html->script(array('ddsmoothmenu','jquery-1.7.1.min','jquery-ui-1.8.17.custom.min'));
You've set the field to be required, so the problem you are experiencing is probably the browser based form validation.
The problem is that the validation applies before TinyMCE injects the contents into the textarea, and so the validation will always fail as the textarea is empty. This is a very long known "bug" btw:
http://www.tinymce.com/develop/bugtracker_view.php?id=4768
http://www.tinymce.com/develop/bugtracker_view.php?id=5671
In Firefox you might notice a validation bubble that appears "behind" the browser in the bottom left corner of the screen, and in Chrome for example it would throw the following error: "An invalid form control with name='...' is not focusable".
The quick and dirty fix would be to set required to false. In order to keep the required class on the generated container div you would have to set this manually using the div option:
'div' => array('class' => 'input text required')
It's also possible to disable browser validation completely by defining the novalidate attribute on the form:
$this->Form->create('ModelName', array('novalidate' => true));
or using the formnovalidate attribute on the submit button:
$this->Form->submit('Submit', array('formnovalidate' => true));
Theoretically it would also be possible to listen to the invalid event and display custom validation bubbles, but the problem here is that the browser behavior is not consistent, ie in Chrome it's not possible to validate invisible (using display or visibility) fields. Also the content would still be missing in the textarea field.
What seems to work is using opacity to hide the field, that way one could position the textarea under the editor, and the validation bubble would be displayed correctly. However that would also require to inject the editor contents in the textarea manually when pressing Enter and when clicking the submit button (or probably even simpler using proper editor change events). I'll see if I can come up with an example for this later on.
Update: I've implemented a fix/workaround in form of a TinyMCE 4.x plugin, as this was bugging me in some of my own applications too, see https://github.com/ndm2/tinymce-validatable
In ExtJs how to change label text dynamically
i.e
iam using like this
LabelError.innerText = "New password is required.";
LabelError.style.color = "red";
but its work only in ie and chrome but not in firefox
so how to change label text dynamically in all browsers
As you can see in the label class docs, the right way to do it is to call the function:
LabelError.setText('<span style="color:red">New password is required.</span>', false);
The false argument will prevent the html tags from being mangled by the function. Anyway, you can try to experiment with it.