I am using the .alphanumeric plugin for jQuery which is certainly doing what I would expect as users type directly into the textbox. But, if a user were to copy and paste a value into the text box, all bets are off.
$("#<%= txtNumber.ClientID %>").alphanumeric({allow:"-"});
I can certainly do this:
$(document).ready(function() {
$("#<%= txtNumber.ClientID %>").blur(function() {
$("#<%= txtNumber.ClientID %>").val(
RemoveInvalidCharacters(
$("#<%= txtNumber.ClientID %>").val()
)
);
});
});
//FUNCTION REMOVES ANY ; IN TEXT TO PREVENT SQL INJECTION
function RemoveInvalidCharacters(text) {
return text.replace(';', '');
}
But... I'd rather not have to kluge up my code even further with .blur() functions. Are there any other ways around this?
Handling the paste event is fairly straightforward. I'm using this technique in my masked input plugin with good results. Feel free to browse the source to see it in use.
Here is the relevant bits modified for your example above.
var pasteEventName = $.browser.msie ? 'paste' : 'input';
$("#<%= txtNumber.ClientID %>").bind(pasteEventName, function() {
setTimeout(function() {
RemoveInvalidCharacters(
$("#<%= txtNumber.ClientID %>").val()
);
}, 0);
});
I found this solution here:
http://www.devcurry.com/2009/10/allow-only-alphanumeric-characters-in.html
<script type="text/javascript">
$(function() {
$('input.alpha').keyup(function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
});
});
</script>
<input type="text" name="test" value="" class="alpha">
I too was needing a solution to the paste problem, and I figured out something that will work for me. A person can still use the Edit > Paste in the browsers menu, but Ctrl-V, as well as right click paste is handled. Tested in FF,IE,Opera,Safari,Chrome:
<!DOCTYPE html>
<html>
<head>
<title>Only Allow Certain Characters</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<br>
<form id="myform" action="">
<input id="element1" name="mytext1" type="text">
<input id="element2" name="mytext2" type="text">
</form>
<script>
/* removes evil chars while typing */
(function($){
$.fn.disableChars = function(a) {
a = $.extend({
allow: ''
}, a);
b = a.allow.split('');
for ( i=0; i<b.length; i++) b[i] = "\\" + b[i];
a.allow = b.join('');
var regex = new RegExp('[^a-z0-9' + a.allow + ']', 'ig');
$(this)
.bind('keyup blur', function() {
if (this.value.search(regex) != '-1') {
this.value = this.value.replace(regex, '');
}
})
.bind('contextmenu',function () {return false});
}
})(jQuery);
$("#element1").disableChars();
$("#element2").disableChars({allow:".,:-() "});
</script>
</body>
</html>
Copy and Paste is definitely a challenge for masked inputs.
Have you considered "encoding" special characters when the form is submitted as opposed to when the user enters values? We do the same thing to allow users to enter the < and > characters in TextBoxes (we convert them to < and > via javascript and then back in to < and > in the code behind.
This way you will not prevent an SQL injection. I’m not required to use your form, I can make mine and POST it to your script. Even easier: I can disable javascript and go drop your database.
Instead, check the input validity on server side.
The easiest ways are escaping it or using parametrised queries.
Related
After Commit 48 (Beta Candidate) i can't get observable array logic anymore. I know it has changed. I've read the changelog and been playing with new commit for some time but couldn't get it working. Helpers just don't update anymore. Any help appreciated.
Here is a simple example. Clicking "add friend" should call friends_names again.. but it doesn't anymore:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
</head>
<body>
<div id="people"></div>
<script id="peopleTemplate" type="text/x-jsrender">
<button id="add">Add person</button><br />
{^{for people}}
<div>
Name: {{>name}},
Friends: <span data-link="html{:~friends_names(#data.friends)}"></span>
<button class="friend-add">add friend</button>
</div>
{{/for}}
</script>
<script>
var data = {
people: [
{
name: "Adams",
friends: [
{name:'Petere'},
{name:'Steve'}
]
},
{
name: "Eugenia",
friends: [
{name:'Bob'}
]
}
]
};
$.templates({
peopleTmpl: "#peopleTemplate"
});
var friends_names = function(friends){
friends = friends || []
var names = []
for (var i=0, l=friends.length; i<l; i++) {
names.push(friends[i].name);
}
return '<b>' + names.join(', ') + '</b>';
};
$.views.helpers({friends_names:friends_names});
$.templates.peopleTmpl.link("#people", data);
//debug
$.observable(data).observeAll(function (ev, obj) { console.log('change', obj); });
$("#add").on("click", function() {
$.observable(data.people).insert({
name: "Amos",
friends: []
});
})
$('#people').on('click', '.friend-add', function(e){
e.preventDefault();
var name = 'Some anonymous friend' + Math.floor((Math.random()*100)+1);
var friends = $.view(this).data.friends;
$.observable(friends).insert({
name: name
});
});
</script>
</body>
</html>
I know nested template can be used (not sure if it will solve the problem) but in real application there is much more logic in helper, thus nested template won't help.
Yes, this is deliberate: See the commit note:
Data linking to arrays is simplified and more consistent. Now tags DO NOT automatically bind to arrays, and refresh when the array
updates. {^{myTag path.to.array/}} will now update when the to.array
property is update (property change) but not when the to.array
itself changes observably. (array change). A tag should opt in to
arraybinding either by deriving from the "for" tag - as in the
'range' sample: http://www.jsviews.com/#samples/tag-controls/range,
or by following the using onAfterLink and onDispose to add/remove
the onArrayChange handler, as in the {^{myWidget .../}} sample in
the JsViews unit tests. This change relates to
https://github.com/BorisMoore/jsviews/issues/158
Here is a really simple fix. If you include the array.length as a parameter (even if your helper function doesn't use it) then JsViews will respond to changes in the array length (which is a property change, not an array change) and will trigger a refresh for your helper: ~friends_names(friends, friends.length)
{^{for people}}
<div>
Name: {{>name}},
Friends: <span data-link="html{:~friends_names(friends, friends.length)}"></span>
<button class="friend-add">add friend</button>
</div>
{{/for}}
In my page I have a form:
<form method="post" id="confirm-order-form" name="confirm-order-form">
Inside the form I have written some scripts to make a JSON call:
<script type="text/javascript"><xsl:text disable-output-escaping="yes"><![CDATA[
$(function() {
$('#submit').click(function() {
if ($('#nlapproved').attr('checked')) {
newsletter();
}
});
function newsletter()
{
$form = $('<form action="http://mydomain.createsend.com/t/j/s/jtes/" method="post" id="subForm" />');
$form.append('<input type="hidden" name="cm-name" id="hidName" />');
$form.append('<input type="hidden" name="cm-jtes-jtes" id="hidEmail" />');
$form.append('<input type="hidden" name="cm-fo-pikty" id="hidPrivateBusiness" />');
$form
.find("#hidName")
.val(']]></xsl:text><xsl:value-of select="$context//checkoutinformation/info[key='name']/value" disable-output-escaping="yes"/><xsl:text disable-output-escaping="yes"><![CDATA[');
$form
.find("#hidEmail")
.val(']]></xsl:text><xsl:value-of select="$context//checkoutinformation/info[key='email']/value" disable-output-escaping="yes"/><xsl:text disable-output-escaping="yes"><![CDATA[');
$form
.find("#hidPrivateBusiness")
.val(']]></xsl:text><xsl:value-of select="$acctype"/><xsl:text disable-output-escaping="yes"><![CDATA[');
$.getJSON(
$($form).get(0).action + "?callback=?",
$($form).serialize(),
function (data) {
if (data.Status === 400) {
alert("Error: " + data.Message);
} else {
// 200
alert("Success: " + data.Message);
}
}
);
}
});
]]>
</xsl:text>
</script>
My problem is that this thing does not work when the outer form is there--the code works fine otherwise.
Note: I am redirecting this page to another physical server in the post back of my outer form and i have a lot of other controls in my first form so i cant simply avoid that.
Can anyone help?
The actual form is being submitted. Stop that:
$("#confirm-order-form").on('submit', function (e) { e.preventDefault(); });
EDIT: to submit ajax, then normal form:
...ajax.done(function () {
$("#confirm-order-form").off('submit').trigger('submit');
});
After successful ajax completion, unbind the prevention of the form submission and trigger a submission.
1) Add a div outside the form that has the runat="server" attribute.
<form runat="server">
<!-- stuff here -->
</form>
<div id="target"></div>
2) Write your jQuery selector to target that div.
$('#target').append('<form id="newform"></form>');
// add your controls...
$.post(
'your_action',
$('#newform').serialize(),
function(result){
// handle result...
},
'json');
3) Do whatever you need to do with the server form...
Is there a standard practice for localizing the JQuery Validation messages?
I've been able to hack something together by declaring my own ClassRules and referencing them instead of the default ones.
My code.
<input class="localized-required" id="myTextInput" name="myTextInput" type="text" value="" />
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
$.validator.addMethod("localized-required", $.validator.methods.required, '<%: Resources.Strings_ValidationMessages.SelectionRequired %>');
$.validator.addClassRules(
{
"localized-required": { "localized-required": true }
});
jQuery("#myForm").validate();
})
</script>
I'm just looking to see if there is a better way.
You could overwrite the messages object in the validator object.
$.validator.messages = {
required: '<%: Resources.Strings_ValidationMessages.SelectionRequired %>'
};
Or you could potentially use your own defaultMessage function.
$.validator.prototype.defaultMessage = function(element, method) {
var locale = magicFunctionToGetLocale();
var message = $.validator.localizedMessages[locale][method];
return this.findDefined(
this.customMessage( element.name, method ),
this.customMetaMessage( element, method ),
// title is never undefined, so handle empty string as undefined
!this.settings.ignoreTitle && element.title || undefined,
message,
"<strong>Warning: No message defined for " + element.name + "</strong>"
);
};
In the above example, $.validator.localizedMessages is an object created elsewhere in your code. The standard validation plugin does not have a localizedMessages object.
There are validation files available if you want:
https://github.com/jzaefferer/jquery-validation/tree/master/src/localization
Just get the ones you need and reference the .js file(s) in your page.
<script type="text/javascript" src="localization/messages_XX.js"></script>
There is a bug in jQuery 1.4.2 that makes change event on select-element getting fired twice when using both DOM-event and a jQuery event, and this only on IE7/8.
Here is the test code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".myDropDown").change(function() {
});
});
</script>
</head>
<body>
<select class="myDropDown" onchange="alert('hello');">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
Update:
Another view of the problem, actually this is the real problem we have with our application. Binding a live change event on a selector that isn't even touching the select-element with DOM-event also causes double firing.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".someSelectThatDoesNotExist").live("change", function() {
});
});
</script>
</head>
<body>
<select class="myDropDown" onchange="alert('hello');">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
Ticket to actual bug: http://dev.jquery.com/ticket/6593
This causes alot of trouble for us in our application cause we use both ASP.NET-events mixed with jQuery and once you hook up a change event on any element every select (dropdown) gets this double firing problem.
Is there anyone who knows a way around this in the meantime until this issue is fixed?
I hate to raise this question from the dead but jquery finally fixed this bug in version 1.7 which was recently released.
I had a play around with the bug and there doesn't appear to be any obvious workaround. In my testing I found that the second change event is triggered by jQuery, so I managed to knock together a quick solution that involves removing the DOM 0 event handler and applying it again on a timer that executes immediately when the thread completes:
jQuery(".myDropDown").change(function() {
if ($.browser.msie) {
var dd = $(this)[0],
oc = dd.onchange;
dd.onchange = null;
window.setTimeout(function () {
dd.onchange = oc;
}, 0);
}
});
This works fine for me in IE8, just one "hello" alert appears, although you might want to add an IE check in there. Or not, it probably won't make a difference It definitely needs that check and I've added it to the sample. Here's my fiddle.
The only other solution would be to remove the DOM 0 handler and use the jQuery handler only.
Clone the control and add the clone immediately after the intended one and assign the event, then remove the control:
if ($.browser.msie && (parseInt($.browser.version, 10) == 8 || parseInt($.browser.version, 10) == 7)) {
var btn2 = $(btn).clone();
$(btn).after(btn2);
$(btn).remove();
$(btn2).bind("click", function () {
//your function here
});
}
something like this?
jQuery(".myDropDown").removeAttr('onchange').change(function() {
alert(0);
});
We actually solve the problem another way, since this is specific to IE, ASP.NET and select element, we use the following code:
$(function () {
if ($.browser.msie) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function() {
$('select[onchange]:not(.iefixed)')
.addClass('iefixed')
.each(function () {
var self = $(this), dd = self[0], action = self.attr('onchange');
self.removeAttr('onchange').change(action);
dd.onpropertychange = function() { dd.blur(); };
});
});
}
});
This make sure that the fix is only applied to the select element that has autopostback set to true (onchange) once.
Basically we rely on jQuery to fire the change event for us, but in order for IE to do that, we need to trigger element blur event when onpropertychange happens.
This is a follow-up question to ASP.NET How to pass container value as javascript argument
Darin Dimitrov has kindly provided his answer using jQuery,
But for some reason, I was not able to select the grid row I wanted to.
Here is the jQuery used to select row.
$(function() {
$('#_TrustGrid input[name^=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
Here is the actual output HTML markup.
<input
id="_TrustGrid_ctl16_ctl05_ctl00_trustDocIDTextBox"
type="text" value="198327493"
name="_TrustGrid$ctl16$ctl05$ctl00$trustDocIDTextBox"/>
I have just started using jQuery tonight and been going through the official jQuery Selectors documentation but have been unsuccessful.
Am I missing something here?
What I did to save the full id of the control I used in my .aspx page:
<input type="hidden"
id="SubcontractorDropDownID"
value="<%= SubcontractorDropDown.ClientID %>" />
You can then just get the value of the id and then use that in your query to know which row to use.
At first glance, I think you just want a '$' instead of '^' and you should be targeting the ID and not the NAME in your selector?
$(function() {
$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
I do not know why selecting through #_TrustGrid would not work.
I was able to get around the problem by specifying :input as shown below.
$(function() {
//$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(':input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});