I'm using multiple textboxes for users to entry different credit cards#, with jquery validations. Ambiguously, only the first text box validation is working. Validation's are not working for the other boxes. There are no js errors too in error console.
It'll be very helpful if someone can please give me a clue.
//for first textbox
$("#cust_reg").validate({
rules: {
cc_num_local: {
required: true,
creditcard: true
}
}
});
//for second textbox
$("#cust_reg").validate({
rules: {
cc_num_roam: {
required: true,
creditcard: true
}
}
});
the relevant html only: http://pastie.textmate.org/2422338
You can have more then one HTML element using the id of cust_reg. If you do then only one will be available to your JavaScript code since one supersedes the other. It also isn't valid HTML. You'll need to change the name of the second field to be something different like cust_reg2.
Since you have one form and two different ID's you might try combining them in your code.
$("#cust_reg").validate({
rules: {
cc_num_local: {
required: true,
creditcard: true
},
cc_num_roam: {
required: true,
creditcard: true //Not sure if this can be the same name
}
}
});
Related
I am using semantic ui and am trying to do some form validation with it.
The scenario I have is the user has 2 options: email,or phone app verrifcation. They select one of the options and enter whatever in a text field then click submit.
However I am not sure how to do rules on this with semantic UI.
I know if I wanted to check if it was blank I could do something like this:
$('.ui.form')
.form({
fields: {
CODE: {
identifier: 'code',
rules: [
{
type : 'empty',
prompt : 'Please enter your verification code'
}
]
}
} } );
However I would like additional rules based upon which option is selected. I have javascript that currently tells me the value of what is selected, and is updated on change. Unsure how to add it into the rules though, so that I can be like -- If phone was select, must be exactly 6 chars long, or IF email was selected, must be 18 chars long (different lengths for different option).
Is there a way to have conditional rules like this? Closet I could find was:
depends: 'id'
Which checks to ensure it is not empty.
Does anyone know how to have conditional rules such as this based on another form element? I am using the most recent version of Semantic-UI
You can do so by adding custom rules.
$.fn.form.settings.rules.atLeastOne = function (value, fields) {
fieldsToCompare = fields.split(",")
if (value) {
// current input is not empty
return true
} else {
// check the other input field(s)
// atLeastOne is not empty
atLeastOne = false
for (i = 0; i < fieldsToCompare.length; i++) {
// gets input based on id
if ($("#" + fieldsToCompare[i]).val()) {
atLeastOne = true
}
}
return atLeastOne
}
}
$(".ui.form").form({
fields: {
number:{
identifier: "number",
rules: [{
type: "exactLength[6]",
prompt: "number has to be 6 chars long"
}, {
// include the input fields to check atLeastOne[email, address, ...]
type: "atLeastOne[email]",
prompt: "Please provide an email or a number"
}]
},
email: {
identifier: "email",
rules: [{
type: "exactLength[18]",
prompt: "email has to be 18 chars long"
}, {
type: "atLeastOne[number]",
prompt: "Please provide an email or a number"
}]
}
}
});
Note that the function uses the input id as the identifier and not the input name. You might also want to look at optional fields.
I'm using handsontable on an angular app with ngHandsontable. I can see that I need to set search to true in the table settings, which should make a query method available.
Can someone explain how I am able to access that method through my angular controller?
<input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" />
<hot-table settings="tableSettings.settings"
datarows="mappingData"
col-headers="true"
height="700">
<hot-column data="Column1" title="'Column One'"></hot-column>
</hot-table>
Angular
function GlobalMappingController($scope) {
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery
}
};
The issue is access to the root handsOnTable instance created by ngHandsOnTable isn't as intuitive as you might think, but in order to access all the functions handsOnTable has by itself you have to do something like this.
First, declare the variable we'll use as the instance of the table
$scope.handsOnTable;
You can access the root for handsOnTable by setting the afterInit parameter in the settings array
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery,
//insert this
afterInit: function() {
$scope.handsOnTable = this;
}
}
};
You can then set an ng-change on the input to something like this:
function search() {
$scope.handsOnTable.search.query($scope.searchQuery);
$scope.handsOnTable.render();
}
You'll also need to, in the same manner as the afterInit, set afterchange with the same statement. If you've got your own custom version of the function then just put it in after everything else has ran.
Keep in mind you'll have to keep the input box bound to searchQuery and add onChange="search()" but that should work - at least it did for me.
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
I am working with kendo ui controls.my functionality is to filter the grid based on date-time and drop down selection. This is working on chrome but not in FF and IE.
var gridResult = $('#Grid').data("kendoGrid");
var condition = {
logic: "and",
filters: [
{ field: "Category", operator: "equals", value: $("#nw").val() },
{ field: "Device", operator: "equals", value: $("#pro").val() },
{ field: "Orig", operator: "equals", value: $("#work").val() },
{ field: "Term", operator: "equals", value: $("#network").val() }
]
};
if (mindate !== null) {
condition.filters.push({ field: "Time", operator: "ge", value: new Date(mindate) });
}
if (maxdate !== null) {
maxdate = new Date(maxdate);
maxdate.setHours(23, 59, 59, 999);
condition.filters.push({ field: "Time", operator: "lt", value: maxdate });
}
gridResult.dataSource.filter(condition);
return false;
});
$('#fromdatetimepicker').attr('readonly', false);
$('#todatetimepicker').attr('readonly', false);
}
When i debug in firefox i didn't find aby bug can any one look at the code and please tell me where i am wrong?
I've been testing your code and I can't find any problems with it, besides that you have an extra ) at the end but that's probably because the function is cut from a larger section of code.
There are however several things that might be causing this problem and there's a lot of code missing so I can't say for sure. Some browsers try to help you out by ignoring errors you make. This can make it work in Chrome but not in FF and IE. The best way to deal with this is to go through the code and add validations that confirm the values every time the Filter method is call. Here are my suggestions for you:
When debugging in Internet Explorer, use IE 11 and use the F12 debugging tool.
You check that mindate and maxdate are not null, but if they're undefined or contain an empty value, they'll pass that test and will be added to the filters even though they're not set.
You don't have any check that mindate and maxdate are valid dates and that you successfully are able to create the JavaScript date variable, before adding it to the filter. This could be a source of error, depending on the other code in your script.
You use the values from $("#network").val() etc directly in your filter without validating them, and that could cause problems in the future. But this is not causing this error.
Edit: Encoding
You need to make sure the encoding of your webpage is correct. Please make sure these two lines exist in the head section of the html code. If you use ASP.NET MVC you can add these two files to the Views\Shared\_Layout.cshtml file. If you use ASP.NET Forms you can add them in your Masterfile. If you use PHP you just put them in the head section.
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
We have a rule that all of our validation messages must be in a summary, and thus the default "this field is required" doesn't cut it because the messages lose their context in a summary and therefore need specific field indicators.
I have a solution that I like rather well, but it soon became clear that there was a need for messages outside of just the required field (email, url, custom methods like phoneUS, etc), so I made some additions to my function.
I've been using jQuery for a while, but I'm not an expert in the optimization area, so I wanted to get some expert help on whether the function below could be optimized...my question is, "is there actually a better way to handle custom error messages in a summary?"
$('.required, .email').each(function(index) {
var $this = $(this);
var label = (
$this.is(':radio')
? $("label[data-name='"+$this.attr('name')+"']")
: label = $("label[for='"+$this.attr('id')+"']")
);
var customMessages = [{}];
if($this.hasClass('required')){
customMessages.required = "'" + label.text() + "' is required.";
}
if($this.hasClass('email')){
customMessages.email = "'" + label.text() + "' has an invalid email address.";
}
$this.rules("add", {
messages: customMessages
});
});
Here is the jsFiddle:
http://jsfiddle.net/GD5nw/1/
So why not just assign the custom message on a field-by-field basis for each field as is most typically done? It seems less verbose than what you've been doing.
http://docs.jquery.com/Plugins/Validation/validate#toptions
Example for input elements with name attribute assigned as first, second, and address.
$('#myform').validate({
rules: {
first: {
required: true
},
second: {
required: true
},
address: {
required: true,
digits: true // just an example
}
},
messages: {
first: {
required: "your first name is required"
},
second: {
required: "your last name is required"
},
address: {
required: "your address is required",
digits: "must only use digits on address"
}
}
});
Working Demo: http://jsfiddle.net/x4YBw/