How to get focus on a single textbox except on some conditions? - javascript

I want to set the focus in a single textbox and some text must be entered in the textbox to move the focus out of it. But there is an exception that I should be able click on the buttons on the page without any entry in that textbox.
Here is what I have done using JavaScript...
function Validate() {
var field1 = document.getElementById('<%=textbox.ClientID %>').value;
if (field1 == "") {
alert("Please Enter some value");
document.getElementById('<%=textbox.ClientID %>').focus();
return false;
}
else {
return true;
}
}
And I have called it like...
onblur="return Validate();"

This is the Script. (jquery required)
$(function() {
$('input[id=word]').blur(function() {
var txtClone = $(this).val();
if(txtClone=="")$(this).focus();
});
});
and here is a html tag
<input type='text' id='word' name='word'>
As you've asked, focus won't move away unless you entered some text and able to click on button outside.

Related

I can't stop the alert method in Chrome

I have an input text and a button for checking the input text value.
When the web page is loaded, the input text has the focus and this value is empty by default.
So when you put the focus outside the input text (onblur), the check_input_value(event) function executes the alert("Your input value must not empty") one time when the input text value is empty.
This works perfectly in Firefox. But in Chrome, this alert is executed indefinitely instead of one time.
Here the code (you can try it (try it with Chrome) at https://jsfiddle.net/fcg86gyb/ ) :
<input type="text" id="input_text"> <input type="button" value="Check input value" onclick="check_input_value(event);">
<script type="text/javascript">
//Get the input text element :
input_text = document.getElementById("input_text");
//Put focus in input text :
input_text.focus();
/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function
to check input text value :
*/
input_text.addEventListener('blur',
function(event)
{
var event = window.event || event;
check_input_value(event);
}
, false
);
//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.
function check_input_value(event)
{
var event = window.event || event;
if(input_text.value == "")
{
alert("Your input value must not empty");
input_text.focus();
return false;
}
}
</script>
So how to execute one time the alert instead of indefinitely in Chrome?
The chrome execute indefinitely instead of one time because your function always return the focus to the input text and always you change the focus your function will be call. In Firefox works well because the input text does not receive the focus in the end of the javascript function.
If you remove input_text.focus(); it is going to work.
Thanks for the link to jsfiddle. I tried working on it and found that the input_text.focus() was getting called recursively.
I commented that and it worked. I think you should call the input_text.focus() somewhere outside where the call may not be recursive.
This is the link where I tried: https://jsfiddle.net/fcg86gyb/1/
//Get the input text element :
input_text = document.getElementById("input_text");
//Put focus in input text :
input_text.focus();
/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function :
*/
input_text.addEventListener('blur',
function(event)
{
var event = window.event || event;
check_input_value(event);
}
, false
);
//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.
function check_input_value(event)
{
var event = window.event || event;
if(input_text.value == "")
{
alert("Your input value must not empty");
//input_text.focus();
return false;
}
}
If you need to maintain the focus on the textbox after showing the alert box only once, you can make use of temporary variable as I stated in the comment and you can achieve the same as follows:
//Get the input text element :
input_text = document.getElementById("input_text");
//Put focus in input text :
input_text.focus();
var temp = 0;
/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function :
*/
input_text.addEventListener('blur',
function(event)
{
var event = window.event || event;
if(temp == 0)
{
check_input_value(event);
}
else
{
button_focus();
}
}
, false);
//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.
function check_input_value(event)
{
var event = window.event || event;
if(input_text.value == "")
{
alert("Your input value must not empty");
input_text.focus();
temp = 1;
return false;
}
}
function button_focus()
{
if(input_text.value == "")
{
input_text.focus();
}
temp = 0;
return false;
}
Hope it helps.
This seems to be a bug in Chrome 52 (discussed here). A workaround that came up was to remove the blur event and reattach it in a timeout:
if(input_text.value == "")
{
alert("Your input value must not empty");
var tmpBlur = input_text.blur;
input_text.blur = null;
setTimeout(function() {
input_text.focus();
input_text.blur = tmpBlur;
}, 0);
return false;
}
https://jsfiddle.net/wpys5x75/3/
EDIT:
However it looks like you still get the same infinite loop when you click outside the window. Another work around would be to assign a different value and then reassign the value in the timeout:
if(input_text.value == "")
{
alert("Your input value must not empty");
input_text.value = ' ';
setTimeout(function() {
input_text.focus();
input_text.value = '';
}, 0);
return false;
}
https://jsfiddle.net/wpys5x75/5/
I too faced same issue; I solved it by calling the focus method using setTimeout method.
Code goes as below:
function check_input_value(event)
{
var event = window.event || event;
if(input_text.value == "")
{
alert("Your input value must not empty");
setTimeout (function(){input_text.focus()}, 0);
return false;
}
}

Check if inputs have text and enable button

I'm trying to find a way that I can require two inputs to have text inside of them so I can toggle the disabled attribute on and off a button.
This would mean that when one input has text, the button is disabled. When both inputs have text, the button is enabled.
Here is my current code that I'm working with:
HTML:
<input name="e" placeholder="email">
<input name="p" placeholder="password">
<button id="submit_button" disabled>Submit</button>
JavaScript (no jQuery):
// Check if there is content in our form inputs and remove `disabled`
// from the button element.
var inputs = document.querySelectorAll('input[name="e"], input[name="p"]');
var button = document.querySelector('#submit_button');
[].forEach.call(inputs, function (e) {
e.addEventListener('input', function () {
// Set states for email and password inputs
if (this.value != "") {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}
});
});
JSFiddle here
My thoughts with this code is that I would query the page for the two inputs, query for the button, and add an event listener that would check the input of each field, and when the value isn't empty, it would enable the button. Right now though, when you type something into either of the fields, regardless if both are filled in or not, the button becomes enabled.
How could I change this JavaScript so that both inputs must have text in order to enable the button?
How about this? :
var inputs = document.querySelectorAll('input[name="e"], input[name="p"]');
var button = document.querySelector('#submit_button');
[].forEach.call(inputs, function (e) {
e.addEventListener('input', function () {
var disabled = false;
[].forEach.call(inputs, function (inputElem) {
if(inputElem.value==''){
disabled = true;
}
});
// Set states for email and password inputs
if (disabled) {
button.setAttribute('disabled', '');
} else {
button.removeAttribute('disabled');
}
});
});
JSFiddle : http://jsfiddle.net/aecaaa9e/14/

How to validate textarea and checkboxes which are generated dynamically

This one seems really common question in StackOverflow. However, I am having difficulty in validating these textarea (Not to left blank) and checkboxes(At least one should be checked). I tried several validation Javascripts and frameworks but in vain.
I have textarea named "case_title0[]" whose will increase the number "0" to "1","2" and so on when user clicks "Add More" button. I want to validate at the point when user clicks the "Add More" button.
Secondly, I want the checkbox (name="editioncheck'+caseNum+'[]") which is dynamic as well to restrict user to leave it blank. The checkbox looks like "editioncheck0[]", "editioncheck1[]" and so on. It needs to be checked at least once to proceed to next "Add More" button. Until then "Add More" button should remain inactive.
So, I want these two type of validation in my form ie. textarea and checkbox.
Which is the simplest framework or custom code to use here?
I don't want fancy display as just alert() box should work in this regard.
Add common class to all textareas and common class to all checkboxes and perform validation.
<textarea class="t"></textarea>
<textarea class="t"></textarea>
<textarea class="t"></textarea>
<textarea class="t"></textarea>
<input type="checkbox" class="c">
function validate() {
var err = false;
$('.t').each(function(){
if($(this).text().length < 1) {
err = true;
return false;
}
});
if(!err) {
/* code to validate checkboxes like above */
}
return !err;
}
Finally, I have figured out the solution and I am going to post it here. As there is no exactly similar solution to my problem I had to code from scratch. While doing so lot of online resources helped me a lot.
To validate textarea on the fly (dynamic generate of text area when user clicks "Add More" button), here is solution I applied:
var csn='case_title'+caseno; //here "caseno" is incremental number to uniquely identify elements
var csum='case_summary'+caseno;
var caset=document.getElementById(csn).value;
var casesum=document.getElementById(csum).value;
if (caset == null || caset == "") {
alert("Executive Summary must be filled out");
caseNum --;
return false;
}
if (casesum == null || casesum == "") {
alert("Summaries with links must be filled out");
caseNum --;
return false;
Next, to validate the checkboxes I did as follows:
var edval='editioncheck'+caseno;
var checkBoxes=document.getElementsByClassName(edval);
var isChecked = false;
for (var i = 0; i < checkBoxes.length; i++) {
if ( checkBoxes[i].checked ) {
isChecked = true;
};
};
if ( isChecked ) {
//alert( 'At least one checkbox checked!' );
} else {
alert( 'Select at least one edition!' );
caseNum --;
return false;
}
The solution seems similar to the concept of fr34k, so thanks a lot. However, I found this online here http://jsfiddle.net/qyE97/
So, every time user click "Add More" button this script is executed and validates for the textarea and checkboxes.

disabling submit button till input fields are validated

i have disabled the submit button in my guestbook. it has 2 fields[name(textbox)&comment(textarea)].it has 2 other fields ID(primary key) and date.the function is:
function Frmvalidate() {
var nmchk=document.forms["guestform1"]["name"].value;
var cmntchk=document.forms["guestform1"]["comment"].value;
if (nmchk.length==0)
{
var namep = document.getElementById("namep");
namep.innerHTML="name must be filled out";
return false;
}
else if (cmntchk.length==0)
{
var cmntp = document.getElementById("cmntp");
cmntp.innerHTML="comment must be filled out";
return false;
}
else
{
document.getElementById("sbmt").disabled=false;
return true;
}
}
i have called the function in places: body tag's onload,button tag's onclick. still its not working and blank entries are being stored in my database.
You dont need to disable the submit button
you gain noting from it. ( alerting the user , running another script etc...)
instead -- The submit button should stop its regular behaviour by this code :
<input type="submit" onclick="return Frmvalidate();"/>
meaning :
when you press the button , it will execute the function yielding True or False and if it's True (only) it will continue to the server.

Change the onblur event of a text field

I have a text box for typing names inside a form.A div below the text box shows names of registered users from the database with the help of AJAX starting with the letters typed by the user.The user can also click on the usernames and those names will be placed in the text box.Also the div will get disappear.I have written onblur event for the text box so that on losing the focus for the text box,the div created below should disappear.This works for me.My issue is that i cant select the names from the div below ,since on blur event fires.I need onblur event because all other events other than selecting username function requires this on blur event.
My code is like this:
<input id="venue" type="text" onkeyup="showData(this.value)"
onblur="return removediv()"/>
<div id="venuesearch">
</div>//div for displaying the set of usernames with help of AJAX
My javascript code is:
function showData(str)
{
if (str.length==0)
{
document.getElementById("venuesearch").innerHTML = "";
document.getElementById("venuesearch").style.border = "0px";
return;
}
// some AJAX code here
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("venuesearch").innerHTML=xmlhttp.responseText;
document.getElementById("venuesearch").style.border="1px solid #A5ACB2";
document.getElementById("venuesearch").style.display="block";
document.getElementById("venuesearch").style.overflow="show";
}
xmlhttp.open("GET","search_venue.php?venue="+str,true);
xmlhttp.send();
}
Inside search_venue.php
There is a method called showVal() on onClick event of the column .
function showVal(val)
{
document.getElementById("venue").value = val;
document.getElementById("venuesearch").style.display = "none";
}
function removediv()
{
document.getElementById("venuesearch").style.display="none";
return false;
}
try this :
function removediv()
{
document.getElementById("venuesearch").style.display="none";
var venue = document.getElementById("venue").value;
return false;
}

Categories

Resources