I have a compare validator on a Password field compared it to a password repeat field. If there is a validation error the error doesn't disappear until the lost focus event is fired. The client wants this changed to be the key up event.
What is the best way of going about this?
It is doable as below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function () {
$('#TextBox1').keyup(function () {
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate();
}
});
});
</script>
Edited: Changed mouseup to keyup.
It does not seem like there is likely to even be a mouse click in this case. After the field is filled out the user would either tab or click to the next box..in either case the previous box would lose focus and fire the validator...unless i am missing something.
Other than that i'd say javascript is your answer.
Related
I have a web page with several forms. Only one is visible at a time, depending on state.
On one form, pressing the enter key appears to be causing a reload of the page rather than triggering a click event for the form's button.
I have a lot of javascript, primarily because I need client side interaction with mailchimp. Because of that, I have disabled the form's action= html and have instead created a javascript function to handle the click. It works fine if you click on the button.
I have also assigned a listener for the sole field in the form:
var input = document.getElementById ("new-email-address");
input.addEventListener ("keyup", function(event)
{
if (event.keyCode === 13)
{
event.preventDefault();
document.getElementById("new-email-address").click();
}
});
Yet, when I click the enter key, the $(document).ready (function() executes. It's possible something else is executing beforehand, but, if so, I haven't found a way to discover that.
What could be causing this behavior ?
It turns out that the enter key is being handled at the form level. To disable that, I added this code for each form:
$("#the-form").keypress(function(e)
{
if (e.which == 13) // Enter key
return false;
});
I have a grid that includes a checkbox control with Autopostback=yes and CheckChanged calling a routine in the vb.net code that updates the record with the checkbox value. When a checkbox is clicked it takes a second or two to run the code and return control back to the web page. I have some users that are clicking several checkboxes one after another so the program is not being called correctly and they are getting a hodgepodge of updated records. For now my solution is for them to wait until the page refreshes before they click the next one. Pretty lamo. Does anyone have any suggestions to work around this problem?
Thanks!
You could write a little jQuery function to temporarily hide your checkbox immediately after it has been checked.
Maybe extend the code below slightly to display a <div id="loading">Loading...</div> or loading .gif image to the user so that they know that your page is being processed and don't get frustrated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#" + "<%: CheckBox1.ClientID %>").change(function () {
if (this.checked) {
$(this).hide()
}
});
});
</script>
Thanks so much Dennis! Your solution finally got me learning jQuery (which I have wanted to do for some time) and helped me get it to work like I wanted.
When the grid loads all the check boxes show with their values. When one is clicked the jquery below runs and hides them all. I have an OnCheckedChanged event on the asp checkbox control that calls the program and updates the clicked record, and when the grid loads again all the check boxes show with their correct values. Totally cool!
<script src="../Scripts/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("input:checkbox").click(function () {
$("input:checkbox").hide();
});
});
</script>
I have complex form and in page a submit button, it has events for both client and server side.
After first time clicking on button, validation class is added and then validation error message is shown,
and then filling to a required field to be validated, and click on button again, page is not post back, even jquery validation engine works well.
In my local computer, page is postback after filled to a required field. I assume, both client side and serverside work.
But not on sever, page is not post back after filled to a required field.
This is my code. I am looking forward your replies and suggestions.
==========================================================================
jQuery(document).ready(function () {
jQuery("#aspnetForm").validationEngine();
//btmContinous
$('#ctl00_PlaceHolderMain_Form1_btmContinous').click(function () {
//Part A
var className = $('#ctl00_PlaceHolderMain_Form1_txtA2').attr('class');
alert(className);
if (!(className == "validate[required] text-input"))
{
alert(className);
$('#ctl00_PlaceHolderMain_Form1_txtA2').addClass("validate[required] text-input");
}
if ( $("#Form1").validationEngine('validate') == true) {
alert("true");
//$('#ctl00_PlaceHolderMain_Form1_txtA2').removeClass("validate[required] text-input");
//should post back here
}
else{alert("false");}
});
It was yesterday i was having the same issue. My validation will not work after postback.
Page contained update panel and all validations on button click inside document.ready.
The validation will not work after postback.
What i did is put the validation i.e
$("#<%= Button1.ClientID %>").click(function() {
//// Validation conditions here
});
inside the Sys.Application.add_load() function and it started working after postback too.
So now code looked like
Sys.Application.add_load(function() {
$("#<%= Button1.ClientID %>").click(function() {
//// Validation conditions here
});
}
More about what happens can be read here
http://www.codeoutlaw.com/2009/11/use-sysapplicationaddload-instead-of.html
Hopefully this helps someone :)
I am working on making a Sharepoint 2007 app look more modern. I am using jQuery actively for that and even though I am no expert, I have learnt enough to know my ways around. Untill I faced this issue today. Here are the bits:
$(document).ready(function() {
alert('doc ready');
var textBox1 = $("#myTest");
alert(textBox1);
textBox1.keyup(function() {
alert('key UP');
});
textBox1.live("keyup", function() {
alert('keykeykey up live');
});
});
Server-generated html:
<input name="ctl00$Spwebpartmanager1$g_1f2d211c_a0c3_490d_8890_028afd098cac$ctl00$myTest" type="password" id="ctl00_Spwebpartmanager1_g_1f2d211c_a0c3_490d_8890_028afd098cac_ctl00_myTest" class="gh" />
So the document ready handler fires, the textbox1 variable is not null, but none of the eventhandlers to handle the keyup event ever fire? The mind reels...
I doesn't work because the id attribute is actaully ctl00_Spwebpartmanager1_g_1f2d211c_a0c3_490d_8890_028afd098cac_ctl00_myTest
try
var textBox1 = $("input[id$='_myTest']");
Here were looking for a html input field with has an id attribute that ends with the string _myTest
In future for your debugging use
alert(textBox1.length)
So that you can whether the jQuery object is empty or not. If the selector doesn't find anything it will return an empty jQuery object which isn't null. You can test for whether the selector found anything by making sure that the .length property is positive.
I have a C# ASP.NET web page with an xml file upload form. When the user clicks 'upload', a javascript confirm alert will pop up asking the user, "is this file correct?". The confirm alert will only activate if the file name does not contain a value from one of the other form fields.
What is the best way to combine the use of a C# ASP.NET form and a javascript confirm alert that is activated if the name of a file being uploaded does not meet certain criteria?
There's not much you need to do with C# for this page, it sounds like most of this will be done on the client side.
Add the fileupload control and a button to your .aspx form. Set the Button's OnClientClick property to something like
OnClientClick = "return myFunction()"
and then write a javascript function like:
function myFunction()
{
// Check other text values here
if (needToConfirm){
return confirm('Are you sure you want to upload?');
}
else return true;
}
Make sure "myFunction()" returns false if you wish to cancel the postback (i.e. the user clicked "no" in the confirm dialog). This will cancel the postback if they click "No".
I suppose you are putting value of valid string in a hidden field (you haven't mentioned). Implement OnClientClick for Upload button:
<asp:button .... OnClientClick="return confirmFileName();"/>
<script type="text/javascript">
function confirmFileName()
{
var f = $("#<%= file1.ClientID %>").val();
var s=$("#<%= hidden1.ClientID %>").attr("value");
if (f.indexOf(s) == -1) {
if (!confirm("Is this correct file?")) {
$("#<%=file1.ClientID %>").focus();
return false;
}
}
return true;
}
</script>
EDIT:- Regarding <%= file1.ClientID %>.
This will be replaced by the client side ID of the file upload control like ctl00$ctl00$cphContentPanel$file1. It puts the script on steroids with respect to using something like $("input[id$='file1']"). For more information please see Dave Wards' post.
window.onload = function() {
document.forms[0].onsubmit = function() {
var el = document.getElementById("FileUpload1");
var fileName = el.value;
if(fileName.indexOf("WHATEVER_VALUE") == -1) {
if(!confirm("Is the file correct?")) {
el.focus();
return false;
}
}
return true;
}
}
I had problems implementing this kind of thing to work in both IE and FireFox because of the way events work in those browsers. When I got it to work in one of them, the other would still cause a postback even if I cancelled out.
Here's what we have in our code (the browser test was stolen from elsewhere).
if (!window.confirm("Are you sure?"))
{
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
window.event.returnValue = false;
else
e.preventDefault();
}
In addition to using client side validation, you should also add a CustomValidator to provide validation on the server side. You cannot trust that the user has Javascript turned on, or that the user has not bypassed your Javascript checks.