I am trying to use kendo UI validator over a textarea using validateinput but always returns false. This Dojo contains the script.
Thanks for your help.
https://dojo.telerik.com/ifIhEGIy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
<script>
function validateFormHecho() {
var validator = $("#hechoForm").kendoValidator({
rules: {
controlValidate: function(input) {
switch (input.attr('id')) {
case 'txtDescripcion':
return true;
break;
}
}
}
}).data("kendoValidator");
alert(validator.validateInput($("input[id=txtDescripcion]")));
}
$(document).ready(function() {
$("#txtDescripcion").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
});
</script>
</head>
<form id="hechoForm">
<div><textarea rows="10" cols="30" id="txtDescripcion" name="txtDescripcion"></textarea></div>
<button onclick="validateFormHecho()">Click me</button>
</form>
</html>
you use <textarea rows="10" cols="30" id="txtDescripcion" name="txtDescripcion"></textarea>.
But in your alert you are searching for an input elem. Textarea is not a classic HTML input, so you have to edit this part:
alert(validator.validateInput($("input[id=txtDescripcion]")));
to
alert(validator.validateInput($("textarea[id=txtDescripcion]")));
Or use $("#txtDescripcion") as the id selector
PS: you misspelled txtDescrip t ion ;)
There simple is not input element with that id. If you search for any element with that id, you get your true: alert(validator.validateInput($("#txtDescripcion")));
Related
I'm using summernote component and what I want to do is I want to stop the user from adding characters if the text area is pre filled, but I couldn't figure out how to stop typing event. I tried this and it worked for me
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 64)
{
e.target.blur();
}
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summernote Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="inner-container">
<div id="summernote1">
Hello Summernote ! please enter text.
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
</script>
</body>
</html>
I simply added this code in my html page and it worked for me.
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
I'm using Kendo DataBound event to print the model from the row triggering the event, the problem I'm facing is the model is undefined when using DataBound different from using Edit event.
.Events(e => { e.DataBound(#<text>function(e) { alert(e.model); }</text>) })
The problem is that apparently e.DataBound is not handling the e argument as the Edit, Cancel, and the rest of events.
When trying with e.Edit(#<text>function(e) { alert(e.model); }</text>) the e.model object is loaded with the properties and values.
Is there a way to achieve this?
You can achieve that by using jQuery only:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
});
let grid = $("#grid").data("kendoGrid");
$("#grid").on('click', 'tbody td', function(e) {
let $td = $(e.target),
dataItem = grid.dataItem($td.parent()),
cellContent = dataItem[$td.data('field')];
console.log($td, dataItem, cellContent);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
Or by using the grid's change event. But in order to use that event you need to set your grid selectable to true:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
selectable: true,
change: function() {
let dataItem = this.dataItem(this.select());
console.log(dataItem);
}
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
How can I programmatically add textbox controls at run time with Asp.net core using kendo UI?
( I don't want use kendo grid )
Not sure what you really want(your post strongly lacks of information), but I think you might try templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script id="textbox-template" type="text/x-kendo-template">
<input type="text" name="#= data.Name #" value="#= data.Value #">
</script>
<style type="text/css">
#fields-container input {
display: block
}
</style>
</head>
<body>
<div id="fields-container"></div>
<button>Add textbox</button>
<script>
let getValues = function getValues() {
return {
Name: "User[" + $('input').length + "]",
Value: "John Doe"
};
};
$('button').on('click', function() {
let template = kendo.template($('#textbox-template').html()),
dataValue = getValues(),
templateValue = template(dataValue);
$('#fields-container').append(templateValue);
});
</script>
</body>
</html>
Demo
As you said you don't want to use grid, I imagine that you want something like kendo does in grid that is to use templates in background. You can use a template alone without any widget at all. With the snippet above you can request data form server with ajax(in the getValues() function precisely) or grab the data from other sources.
I'm working with dojo1.7 and here i'm looking for a regex that will validate an Email address and here i'm using the widget dijit.form.ValidationTextBox.I've googled enough,but found nothing.
Here is the code and i left the regExp property empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Email Validation</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/form/ValidationTextBox"]);
</script>
</head>
<body class="claro">
<label for="email">Enter your Email Address:</label>
<input type="text" name="email" value=""
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="regExp:'', required:true, invalidMessage:'Invalid Email Address.'">
</body>
</html>
Please someone help me to find the regular expression.!
If you want to validate optional email address just use the following JavaScript code.
dijit.byId("newuser_email2").validator = function(value, constraints){
if(value == ''){
return true;
}
return dojox.validate.isEmailAddress(value, constraints);
}
Remember to replace your input id in my case I'm using newuser_email2.
dojox.validate.regexp has some regexes for common data including email
regExp: dojox.validate.regexp.emailAddress
var emailField = new ValidationTextBox({
required: true,
validator: validateWeb.isEmailAddress
}, "emailField");
i have script like this....
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<title>for testing works</title>
<style>
div{
height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div').click(function(){
$(document).load('load.html');
} );
});
</script>
</head>
<body>
<div id="init">Click Me</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>
in load.html i have a paragraph with with dummy content.
why this script is not changing my content of page...
loading a document object inside other is allowed or not?
You should change $(document).load('load.html'); to $('body').load('load.html');:
$(document).ready(function()
{
$('div').click(function(){
$('body').load('load.html');
return false;
});
});