I am using Valdr module to validate my form, it is working very well and validates the control content when i press tab, however I wanted to validate the control content while typing (keypress).
Your help is highly appreciated.
valdr is implemented as AngularJS validator. This means the validation happens by default on keypress when the ngModel is updated.
It is possible that you changed this behaviour in your app by configuring ngModelOptions to update the model on blur.
If this is not the case, you most likely have to change your CSS. This is how it is intended to control the visibility of validation messages.
The following CSS would show the valdr messages as soon as the user starts typing in the field:
.valdr-message {
display: none;
}
.valdr-message.ng-invalid.ng-dirty {
display: block;
}
Related
I got my form in a wordpress website: https://www.dravaliani.com/250botox/ which on desktop if you don't fill all the fields then a warning message is displayed so that user don't let them empty.
But If I see the same form but on a mobile device (a phone), if you leave the fields empty the warning message do not appear. And the same thing happens for Tablets.
The form is create with GravityForm ALTHOUGH it's not its fault because I have create another page and the form works perfectly. So I guess the ajax it's not loading on mobile devices.
any ideas?
it's not ajax you have duplicate form in your html output gform_fields_1 that's why you are not seeing the validation results.
The first one form is hidden using css :
#media screen and (max-width: 640px) .fusion-no-small-visibility
{ display: none !important;
}
The validation script which adding the error massage most probably using querySelector to select the form and appending the error massages, if you change above css code to display the first form you will see the validation error is already there.
How can I change style on invalidated form fields?
I need that when user submits data on form, and if error occurs, I would like to change background color on invalidated ie. text box to red color, and not to display any error message.
Is it possible to achieve in CakePHP?
Ok, got it.
Invalidation should be defined in Cotroller like:
$this->Student->invalidate('email', false, true);
And new style defined like:
.form-control.form-error {
background-color:#790F12;
border:2px red solid;
color:#fff;
}
Thank you all anyway.
i am doing MVC model validation through data annotation and my validation message is showing just at right side of input but i want to show it at the below of input box like the screen shot.
so just tell me what i need to do without touching html. thanks
You can alter field-validation-error and validation-summary-errors classes in CSS to make them reside on a new line. One way is to make them block elements by using display:block style. Here is a sample CSS:
.field-validation-error {
display: block;
}
I am working with CKEditor 4.0.1.1 in an intranet and try to validate my code with W3C markup validation service.
The validation markup service find this error :
Error Line 547, Column 2455: there is no attribute "data-cke-saved-src"
<img alt="" data-cke-saved-src="http://portail-rep/Contents/images/Java…
How can i disable this functionnality of ckeditor protecting code to make my code ok for W3C validation ?
CKEditor uses many special attributes and elements to implement some of its features. However, they are used only internally and should be stripped out when getting data by editor.getData(). Therefore editor produces valid markup.
E.g. open http://ckeditor.com/demo, switch to source mode and you'll see that the image doesn't have the data-cke-saved-src attribute. However, if you'll use Firebug or Webkit's dev tools you'll find that the image has this attribute.
PS. In fact, data-cke-saved-src is a valid attribute in HTML5.
I had same problem now. This problem has been solved by using CKEDITOR config on blur event.
I'am using inline editing on element.
My ck config contain on blur event which have destroy method.
CKEDITOR.config.on = {
blur: function() {
this.destroy();
}
}
Using is simply:
On element click will create instance of new editor and it enable inline editing.
Now if user click outside of editor and on blur event invoked, editor destroy it self and if no editor instance exist, the content of the data is cleaned from data-cke attributes.
I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.
Try to seek help from thread below, zindex is not working.
https://github.com/loopj/jquery-tokeninput/issues/190
here is the input control that i am using.
http://loopj.com/jquery-tokeninput/demo.html
Thank you.
It works by setting the z-index manually:
$(".token-input-dropdown").css("z-index","9999")
The function given in
https://github.com/loopj/jquery-tokeninput/issues/190
does not work in my coffeescript:
$('#book_author_tokens').tokenInput('/authors.json', {
zindex: 9999
});
I think that a better solution is to add it to the css file (instead of doing it via js):
div.token-input-dropdown-facebook {
z-index: 11001 !important;
}
Of course, drop the "-facebook" suffix if you're using the default theme.