I am creating a mobile site using Kendoui mobile and using KendoValidation.
The problem is that by default the error messages block the input area's due to the small display area.
One thought I have is to just change the color of the prompt to red when a input is invalid and, if needed, a tooltip that will display when the input as focus.
Is there a way to stop the messages and get perform this action?
Thanks, George
I found my own solution:
Instantiated the validator using:
var validator=$('#mt-New-Reservation').kendoValidator({ errorTemplate: "" }).data('kendoValidator');
and added the following css:
.k-invalid {background-color: lightpink !important;}
The errorTemplate: "" causes the error message to not display.
The validator adds a class k-invalid to any item that is not valid, so the css changes the background color of the input area.
For my application, most of the inputs as self-explanatory and do not need a detailed message (most of the time the 'required' rule is what's making it invalid). So just changing the background color draws the used's attention to the item that needs to be fixed.
-George
Related
I would like some advice on how to specify the element for certain event handler. I'm trying to change the color on a paragraph when I click on it but it change the color regardless of where I click on the browser.
function onmouseA(){
document.getElementById("test").style.color = "#C5D9FF";
}
document.onmousedown = onmouseA;
I actually did specify the with the id="test", but it doesn't work properly, need some advice, thanks.
I added kendo chart on a page according to the documentation.
But started to get next error 5 times per each kendo ui chart
Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
Charts are drawn but those errors break pdf export. When I use same datasource as in my app on kendo ui dojo.telerik editor there is no error.
I know there might be dozens of possible reasons but I'm a bit locked with that for next few days. So I decided to try luck on stackoverflow in case anyone had anything similar.
Any ideas?
I had the same error, and for me it was related to the <kendo-chart-series-item-labels> component.
I had as property rotation="auto" but the rotation property should be only a number. Removing the property solved it.
<kendo-chart [chartArea]="{ height: 300 }">
<kendo-chart-series>
<kendo-chart-series-item
type="column"
colorField="color"
[gap]="1"
[spacing]="0.25"
[color]="barColor"
[data]="chartData"
[stack]="true"
field="TotalSum"
categoryField="TransactionType"
[tooltip]="{ visible: false }"
>
<kendo-chart-series-item-labels
font="bold 16px unity-medi"
color="#3c3c3c"
rotation="auto"
[margin]="30"
></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
solution: remove rotation property inside the kendo-chart-series-itme-labels component
Kendo API documentation for this component here: https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesLabelsComponent/
Of course, in your case, it may come from a different component.
Maybe double check if you have a property inside a kendo-chart or one of its child component that requires only numbers while you may be passing a string or something else to it?
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.
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
I have recently downloaded mColorPicker.js from here
However, I am running into some issue with this -
When user enters an invalid color value like '#454545xxxx' in the color box, I get a js error - Invalid Property value in IE7 (working fine in Firefox)
error is coming in
jquery-1.4.2.min.js,
line 116 - if(e)f[b]=d
when d = "#454545xxxx"
Also, ColorPicker image is hidden for this textbox.
Any ideas?
The reason this is happening is that the plugin is trying to set the value of the background colour to exactly what the user typed, without doing any validation checking to make sure it is a valid colour. The plugin calls the jQuery .css() method to do this, which is why the error is occurring inside jquery-1.4.2.min.js.
If you are able to modify the plugin code, you can then add checks to make sure the value entered is a valid colour before proceeding.
You might also suggest adding this feature to the plugin author, or, if you get it working successfully, submitting your updated code to them so they can benefit from your work.
I had a quick look, but I don't have the time to properly make the necessary changes to the plugin to ensure it correctly validates the colour is valid in all the right places. Good luck!