jQuery Validate - digits of min length of 10 or 13? - jquery-validate

How do I create a custom validation rule for the jquery validate plugin that checks against the user's input as either 10 or 13 digits? Thanks much for the help.

Very simple sample of validation
$("#FormToValidatePhoto").validate({
rules: {
Title: { minlength: 10, maxlength: 13 }
},
messages: {
Title: { minlength: "Min is 10", maxlength: "Max is 13" }}
});

Related

Laravel - Change error message for Authenticates user

I changed login condition as per my requirement in AuthenticatesUsers
protected function credentials(Request $request)
{
return array_merge($request->only($this->username(), 'password'), ['is_approved' => 1]);
}
But for Not Approved error message is These credentials do not match our records.
How to change this message?
did you mean validations?? you can change it using the novalidation. just insert that at the end of the form. if it does not work, you can use a js.
here's a sample js:
var $ = jQuery;
$(document).ready(function($) {
$("form[name='Cust_Form']").validate({
errorElement: 'div',
rules: {
postal_code: {
number: true,
minlength: 4,
maxlength: 4,
required: true
},
email: {
email: true
},
unit: {
number: true
},
building: {
number: true
},
contact_2: {
number: true,
minlength: 11,
maxlength: 11
},
contact_1: {
number: true,
minlength: 11,
maxlength: 11
}
},
// Specify validation error messages
messages: {
postal_code: {
minlength: "Your postal code must be at least 4 characters long",
number: "Please enter a valid postal code",
maxlength: "Your postal code must be at least 4 characters long",
required: "Required field"
},
email: {
email: "Please enter a valid email address"
},
unit: {
number: "Please enter a valid unit number"
},
building: {
number: "Please enter a valid building/house number"
},
contact_1: {
minlength: "Your contact number must be at least 11 characters long",
number: "Please enter a valid contact number",
maxlength: "Your contact number must be at least 11 characters long"
},
contact_2: {
minlength: "Your contact number must be at least 11 characters long",
number: "Please enter a valid fax/phone number",
maxlength: "Your contact number must be at least 11 characters long"
},
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});

Kendo Grid auto resize by number of rows

How can I display fixed number of rows in kendo grid regardless of window size change?
I need to display 10 rows regardless of window resizes.
In order to do this, I need to re-calculate the number of rows and display 10 rows only back inside the grid. My requirement is to calculate the rows to display correctly in the grid. (in fact, I have search on internet and seems can't find any examples/articles, if you have any please share with me too ). My current solution has no error in my opinion, but still incorrect??? . Can someone help me find errors and correct me? Moreover if I insert some items above grid, the wrapper and data items(grid) becomes incorrect totally.
I need some insight and/or code-examples on this matter.
Much appreciated for the help.
My current codes for the resizing grid is as follow:
function resizeGrid() {
var gridElement = $("#grid"),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
function resizeWrapper() {
$("#outerWrapper").height($('#body').innerHeight());
}
and call the functions of both of them:
$(window).resize(function() {
resizeWrapper();
resizeGrid();
});
This is my datasource and schema:
$(document).ready(function() {
$(window).trigger("resize");
$("#grid").kendoGrid({
dataSource: {
data: [
{ userId: 11111, No: 1, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'testing', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
{ userId: 22340, No: 2, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'test0', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
.....
],
schema: {
model: {
fields: {
userId: { editable: true },
date: { filterable: { ui: "datetimepicker"}},
isActive:false,
No: { editable: true }
}
}
},
pageSize: 10
},
sortable: true,
reorderable: true,
scrollable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: 'No' ,width: 50 },
{ field: 'userId', title: 'ID', template:"<span class=ul>#=userId#</span> </br> <span class='pie'>1/5</span>", width:60 } ,
{ field: "isActive",
headerTemplate: '!',
template: '<span class="k-icon k-i-circle Unicode: e308" style="color: green; font-size: 28px;"></span> </br> <div class="div1"></div>', filterable:false , width: 40 },
......
]
});
});
Here is my kendo link: http://dojo.telerik.com/aviQU/6
Why not tell the grid to use a page size of 10? No need to recalculate sizes.
Set the data source's page size when you configure the grid.
Or are you setting (CSS/JS) the height of the grid somewhere that is causing it to resize?

Kendo Grid - How to conditionally apply a min value validator to a field?

In my editable grid I have a field, one of which I want to have a minimum value of 0 or 1 depending on which row it is. For instance:
ID: {editable: false},
NameField: { editable: false },
Count: {
editable: true,
type: "number",
validation: {
required: true,
min:{ if( NameField === "George" {1} else {0} },
step: 1,
validationMessage: "My validation message"
}
},
How do I refer in min to the current NameField value?

HighChart getting navigator to work with dynamic data

I am trying to have a live graph of bitcoins that can be running long term with two datasets buy and sell using HighStocks the problem is the data is all live so the graph starts with no data and gets an update every 30 seconds and in those conditions HighStocks doesn't always seem to play nice
I have created a demo which is very close to the final code http://jsfiddle.net/v3z6T/2/! the increment is set to 1 second to speed up the demo, also if you change adaptToUpdatedData to true this has significant lag effects until the lowest navigator interval is exceeded (30s) so be careful
I want the navigator area to work but if i leave it updating with adaptToUpdatedData : true
The graph is very laggy after a short time and I can't leave it running for hours without the whole browser starting to not respond and getting script delay errors
This is strange to me as running for example 8 hours at 30second increments is only 960 data points, not enough to use as much processing and memory as it seems to
If adaptToUpdatedData is false the graph is much faster and the updates stream in ok until one of the navigation buttons is used then the graph is no longer 'live' as the new updates are out of scope, also the navigator starts at 1970 rather than the start of the series data
Does anyone know a way to trigger a navigator refresh or something I can call when I add a new data point that will keep the navigator area updated and keep the graph at the latest data entry point and not stop the page from rendering in a timely fashion? or a better way of using the api or data
Hope that makes sense
The whole idea of this graph is to be kept running for days possibly weeks to get a live view of the data as its progressing and I cant use the handling large datasets example code from HighStocks as the data is all live, not to mention I am not really working with large datasets anyway just constant slow updates
$(function()
{
var curTime = $.now();
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartContainer',
zoomType: 'x',
turboThreshold:100,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30S'
},{
count: 5,
type: 'minute',
text: '5M'
},{
count: 30,
type: 'minute',
text: '30M'
},{
count: 60,
type: 'minute',
text: '1H'
},{
count: 360,
type: 'minute',
text: '6H'
},{
count: 720,
type: 'minute',
text: '12H'
},{
count: 1,
type: 'day',
text: '1D'
},{
type: 'all',
text: 'All'
}],
inputEnabled: false
},
scrollbar: {
liveRedraw: false
},
title : {
text : 'Live Bitcoin Data'
},
exporting: {
enabled: true
},
navigation: {
buttonOptions: {
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
},
navigator : {
adaptToUpdatedData: false
},
yAxis: {
title: {
text: 'Price'
}
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'Sell',
color: '#00FF00',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
},{
name: 'Buy',
color: '#FF00FF',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
}]
});
setInterval(function() {
var chart = $('#chartContainer').highcharts();
var exchangeSellRate = Math.floor(Math.random()*30)+40;
var exchangeBuyRate = Math.floor(Math.random()*30)+40;
var x = $.now();
chart.series[0].addPoint([x,exchangeSellRate],false,false);
chart.series[1].addPoint([x,exchangeBuyRate],true,false);
}, 1000);
});

Kendo Grid - In Firefox triggering an alert in the save event causes a page reload

I want to know if anyone has seen this. I have a kendo grid and in the save event, I want to do some validation. Basically to make sure that the new values difference between the old is less than or equal to the balance.
So if it is greater than the balance, I trigger an alert and preventDefault. However displaying an alert causes the page to reload in FireFox.
Here is my grid:
$("#gridOpenInvoices").kendoGrid({
autoBind: false,
dataSource: openInvoicesData,
scrollable: true,
sortable: false,
navigatable: true,
toolbar: [{name:"save",
text:strings.ApplyUpdates},
{name: "SplitPayment",
text: strings.SplitPayment},
{name: "PaidOut",
text: strings.PaidOut},
{name: "CreateCredit",
text: strings.CreditBalance},
{name: "UndoAllocation",
text: strings.UndoAllocation}],
columns: [
{
field: "CustomerName",
title: strings.AccountName,
hidden: true
},
{
field: "OpenTransactionId",
title: strings.OpenTransaction,
width:90
},
{
field: "InvoiceNumber" ,
title: strings.InvoiceNumber,
width:65
},
{
field: "GrossSales",
title: strings.OriginalAmount,
width: 75,
format: "{0:c}",
decimals: 2,
min: 1,
value: 0
},
{
field: "Balance",
title: strings.TransBalance,
width: 75,
format: "{0:c}",
decimals: 2,
min: 1,
value: 0
},
{
field: "Date",
title: strings.Date,
width:75,
format: "{0:MM/dd/yy}"
},
{
field: "Age",
title: strings.Age,
width:55
},
{
field: "CheckNumber",
title: strings.CheckNumber,
width:85
},
{
title: strings.ApplyPayment,
width:75,
template: "<input class='k-chk-applied chkbox' type='checkbox' data-bind='source: IsApplied' name='IsApplied' #= IsApplied ? 'checked' : ''#/>",
attributes:{"class":"tdIsApplied"}
},
{
field:"AppliedAmount",
title: strings.AppliedAmount,
format: "{0:c}",
width: 95,
attributes: {"class" : "tdAppliedAmount"}
}],
save: function(e) {
var model = e.model;
if (e.values.AppliedAmount != null) {
var remainingBalance = context.getRemainingBalance();
var difference = e.values.AppliedAmount - model.AppliedAmount;
if (remainingBalance >= difference) {
var balanceCopy = model.BalanceCopy;
model.Balance = model.GrossSales - e.values.AppliedAmount;
model.BalanceCopy = model.GrossSales - e.values.AppliedAmount;
if (model.Balance == 0 && model.IsUncollected) {
model.IsUncollected = false;
context.UpdateBalance(balanceCopy, 0, true);
}
context.UpdateBalance(model.AppliedAmount, e.values.AppliedAmount, true);
this.refresh();
context.showButtons();
}
else {
alert("The applied amount exceeds the remaining balance");
e.preventDefault();
}
}
}, editable:"incell"});
This seems to be only happening when you edit the applied amount and hit enter to commit. Any idea of why this is happening?
The solution is fairly simple: Do not use an alert.
I do have the same problem in some events in kendoUI Widgets.
If you need to display something to the user, use kendoWindow with it's modal property set to true.
Alerts should only be used for debugging purposes, like console.log.

Resources