I have a textbox.T he user will be entering entering a number in this box. The user should enter two digits followed by a period "." and another digit. It would look something like 22.3 or 00.5 or 01.2.
If the textbox is not empty, I want to enforce a function which validates the value entered by the user (and gives them an alert if the value entered is not according to the format mentioned above). This function needs to be triggered when the textbox loses its focus. I am not sure how to go ahead in writing this function as I am still new to this.
Any help would be appreciated.
p.s. This function should be triggered each time there is a change in the value. Like suppose, the user enters a value 22, then when the textbox loses its focus, the JavaScript function should be triggered giving them an alert asking the user to change it to the accepted format which is 22.0.The function should be triggered again when the textbox loses its focus (after the change has been done). This time there would not be an alert since the user entered it in the right format.
Excuse the Prototype specific code, but maybe you'll get the gist of it. You'll want to listen on the "onblur" event of the textarea, and then validate the entered value with a regular expression.
Event.observe('textboxId', blur, function() {
var val = $F('textboxId');
if (/^\d{2}\.\d$/.test(val)) {
alert('Invalid value');
}
});
If you're not familiar with any javascript frameworks, and just want to get this working, try this:
<textarea onblur="validate(this.value);"></textarea>
<script type="text/javascript">
function validate(val) {
if (/^\d{2}\.\d$/.test(val)) {
alert('Invalid value');
}
}
</script>
Purists, please don't punish me for adding this.
Related
Watch the video to see what I mean exactly https://youtu.be/kvdVNwTjw5c Thank you!
I'm trying to automate login this website shopee.sg/buyer/login I need to input the login name first but I couldn't do it with my codes, it always changed back to original value after the code is executed. I have used codes document.getElementsByClassName("_56AraZ")[0].value = "my username";
or
document.getElementsByClassName('_56AraZ')[0].setAttribute('value',"my username"); the text in the field appeared on screen to be changed but then the text flashed back to the previous value after I clicked to other field or clicked somewhere else, it didn't really change!
I know this code can be successfully on other websites but this website is tricky for me. Can anyone help me to input text to this field successfuly? Thank you!
Probably something else also tries to write in that field - it may be other script or the browser (saved form data). I suggest you delayed your script with a setTimeout function for some absurd time (like 2 seconds or more) and if it helps, lower the delay to a working, but acceptable value. so your script is the last thing that writes to that field. And/or you can try running it on window.load event.
If I run this from the console, it works:
document.getElementsByClassName("_56AraZ")[0].value = "my username";
So probably you run your code before the input is even created. Let's check it.
Inside the setTimeout callback, insert this:
const field = document.querySelector("._56AraZ");
if (field) {
field.value = "my username";
} else {
alert('No input field!');
}
This should let you know if you try to fill the field too early. If this is the case, you'll have to know somehow when the input field is being created and run your code after it happens. How to do it exactly - I can't tell you as I know nothing about your site's architecture.
Need to know the use of focus function here.
Can anyone explain this code?
function Allow Age(){
if(!form.age.value.match(/[0-9]+$/) && form.age.value !="")
{
form.age.value="";
form.age.focus();
alert("invalid format");
}
if(form.age.value.length > 1)
alert("invalid entry")
}
The first If statement in this code is to validate that the Age entered by the user is numerical, and not null. The second is used to check if length of entered age is greater than 1 (Not sure why you have this, but this is what your statement does).
As for your first question, Focus is used to give the textbox the blinking cursor, i.e : Set it ready for receiving user input.
In pseudo code, it is :
function Allow Age(){
If age is not numeric and its value is not null
Clear the textbox
Set focus to the textbox
Send a message saying "Invalid format"
End if
If the length of the age entered is greater than 1
Send a message saying "Invalid Entry"
End if
}
.focus() makes the blinking line appear in the text box so you can start typing in it. Try googling it first in future.
focus() will cause the cursor to show up in that field so when the user types, they type into that field. It is the same as when the user clicks on the field right before typing into it.
It means that the age field in the form gets input focus.
I have trapped the cut event (jquery) on a textbox. What I want is to get the text on the textbox during the cut event is triggered.
I've tried accessing the data the user cut via evt.originalEvent.clipboardData.getData('text') but returns undefined.
My goal is to know if the user cut all the text (textbox is now empty) or not.
Thanks in advance
You can setTimeout with a duration of 0, which schedules a function for immediate execution. The nice thing is that the function will execute once the text has already been cut, so you can check then if your textarea is empty (which would mean that the user has cut all the text):
var ta = $('#YOUR_TEXTAREA');
ta.bind('cut', function() {
setTimeout(function(){
if (!ta.val()) {
// user cut the whole text.
}
},0);
});
You might also want to add a check before the setTimeout to test whether there is any text in the textarea before the text gets cut (if the user presses Ctrl^X without any text being selected, the cut event still triggers)
Hope I got you right:
In jQuery you could use something like this to see if a textbox is empty on every user's keyup:
var txt;
$('#textbox_ID').live('keyup', function() {
txt = $(this).val().length;
if(txt < 1) {
alert("textbox is empty");
}
});
This should work, because everytime the user releases a key and has the textbox focused, it checks if it's empty.
I would suggest looking at this, JavaScript get clipboard data on paste event (Cross browser), it is for the paste event but I'm sure you could do something similar and compare the current value to that on the clipboard, if they are exactly the same than the input would be empty, otherwise not.
I have input field
<input type="text" name="vehicle_make[]" id="make1"/>
and i have help dropdown that updates this field if user choose to do so. I do it trough standard jquery code
$("#make1").val("value");
Problem is, since i use validate plugin to validate this field, if user click on validate before entering anything in that box, he will get notice that he needs to fill it, but then if he fills it trough dropdown, validate plugin will not detect it until user click on submit again.
I know i could call submit in function in which i process dropdown, but i think that it is not right solution, since i would need to check if validation is already done before doing that (since if it is not, it would start validation before i want it to start).
I also need to tie some other things to that field also, so i would like to know is there is a way in which i could write function so it always check if field is filled, even if user did not fill it directly.
Sorry if i didn't explain everything right, this is my first message here.
Try this
$("#make1").change(function(){
//do something there
});
I have found solution. First, i created js variable form_submitted, and added onclick event to submit button, to change value of variable form_submitted to yes. Then, i created function:
function update_validation(){
if(form_submitted == 'yes'){
$("#my_form").valid();
};
};
that i call when user do something that is not detected regularly with validate plugin. This function manually starts validation again, but only if it has been started before by clicking on submit.
I want to have a textarea with a maximum length, and show the user how many characters are left (as it's done on twitter), but I can't seem to get it to be as good.
The requirements are:
Must show the current number of characters they've typed
Must remain accurate when a key is held down
Must remain accurate when backspace/delete is used
Must remain accurate when text in the box is selected and cut/delete by using the right click menu
Must allow the user to go over the limit (I hate it when a field actually prevents me from going over, it makes it harder to edit it down)
Is there a jQuery plugin to do this? Or is there a simple javascript way of doing it (the onChange method doesn't update as they're typing, and keydown/keyup would have troubles with mouse changes)
At the moment it seems like the best way is to have a function to do what I want (check the length and update the message), call it with keydown/keyup/change, and also poll it a few times per second. Is there a better way?
What you usually do is attach multiple event handlers pointing to a validating function, but you won't be able to stop the rightclick/paste with this...
$(document).ready(function() {
$("#myTextArea").live("change keydown keyup keypress", function() {
validate();
});
});
function validate() {
// validates #myTextArea
}
try this
$("#textarea").on('input',function(){
if(this.value.length > 50) {
alert("u cant input more.");
this.value = this.value.substring(0,50);
}
$('#counter').html(this.value.length + '/50');
});
maybe this code help u