|
JavaScript - No Empty Entries For Textbox & Listbox Validation
Hi there, I have this form that validates a few textboxes & a dropdownlist. And when it is not filled in, the border of the textboxes and dropdownlist would turn red, followed by an alert message notifying which field have not been filled in.
Else, the border will revert back to black, and the form will be submitted successfully. Right now, I would like to prevent the user from entering blanks (like entering a space to cheat the system). How should I tweak the codes to make it work? Javascript Code: function check(checkForm)
{
var fields = new Array("Name","Email Address", "Domain Name");
var index = new Array(),k=0;
for(var i=0;i<fields.length;i++)
{
var isFilled = false;
var c = document.getElementsByName(fields[i]);
for(var j = 0; j < c.length; j++)
if(!c[j].value == "")
{
isFilled = true;
c[j].className = "defaultColor";
}
else
{
c[j].className ="changeToRed";
}
if(!isFilled)
{
index[k++] = fields[i];
}
}
if(k>0)
{
joinComma = index.join(', ');
alert('The field(s) corresponding to '+ joinComma + ' is/are not selected.');
return false;
}
}
HTML Code: * Name: <input type="text" id="Text27" name="Name" /><br /> <br /> *Email Address: <input type="text" id="Text28" name="Email Address" /> @ <select id="Select5" name="Domain Name"> <option></option> <option>hotmail.com</option> <option>yahoo.com</option> </select> <input id="Submit5" type="submit" value="Submit" onclick="return check(checkForm)"/> Similar TutorialsHello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! I'm trying to move a list of names from a textbox (jim;bill;sam;cathy to a listbox. My code so will move the name to listbox but all one line. I need the list the names in the listbox so that can click them one at a time. Please see my code. How can I modify it to fill the list one name per line? function addItem(){ var tb = $get('<%=txtWhoTo.ClientID%>'); var rightListbox = document.getElementById('<%=lstNDisplay.ClientID%>'); if(strText.length > 0){ var nlength = rightListbox.options.length; rightListbox.options[nlength] = new Option(strText, nlength, false, false); } } I don't want remove any names from the listbox till I click the "OK" button and overwrite what is in the textbox. Hi, I have a text-box where you enter the phone nos. On key-press, i have written a validation code to enter only nos and "-". I have disabled Ctrl+v, but my customer want to enable ctrl+v for that text-box only. My requirement is after pasting the value it should automatically check for validation.. How to do it? Thanks... Hi, I am having a very difficult time trying to get my text box to validate. I successfully validated my first program using prompts but now when I am using a HTML form I cannot get it to work. I have spent hours upon hours trying to get this working, any help would be greatly appreciated. Code: <html>
<head>
<title></title>
<script type="text/javascript">
function validateform()
{
var temp = document.forms["inputform"]["temperature"].value
while ((isNaN(temp)) || (temp == ""))
{
alert("Please enter a number");
return false;
}
if (parseFloat(temp) > 35)
{
alert("Wow, it's really hot!");
}
else if (parseFloat(temp) <= 35) && (parseFloat(temp) >= 18))
{
alert("It's a comfortable temperature right now");
}
else if (parseFloat(temp) < 18)
{
alert("Brrr, it's a little bit cold for my liking");
}
else
{
alert("Goodbye, and thanks for using TempReader");
}
}
</script>
</head>
<body>
<form name="inputform" method="post" action="">
<table>
<tr><td>What Is The Temperature?</td><td><input type="text" name="temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td></td><td><input type="submit" value="Submit Details" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
My code is not validating the textboxes..if someone could help me figure this out. Thank you <script type="text/javascript"> function validate() { with (document.form1) { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var alertMessage = "The following fields\nare REQUIRED:\n\n"; if (realname.value == "") { alertMessage += "Name\n" } if(reg.test(email.value) == "") { alertMessage += "Email\n" } if (phone.value == "") { alertMessage += "Phone\n" } if (security_code.value == "") { alertMessage += "Security Code\n" } if (alertMessage != "The following fields\nare REQUIRED:\n\n") { alert(alertMessage); return (false);} return (true) } } </script> <form action="formmail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return validate()" > Reply With Quote 01-31-2015, 09:12 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Have you tried using your error console (F12 key)? if(reg.test(email.value) == "") { should be if(!reg.test(email.value) { as test returns true or false. But form validation of the pattern if (document.formname.formfield.value == "") - that is blank or empty- is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses (as you have done). This topic has been covered many times before in this forum. The use of with is strongly deprecated and is forbidden in strict mode, and alerts are long obsolete as a way of displaying a message to your users. And so is assigning a name to a form - it is allowed only for the sake of backwards compatibility. In short - you should rewrite your code to modern standards. HI, I am not a programmer. however, i am working with a website wherein on its registration page there is this text box to enter the name. No for example if I have to enter my name as John Smith it does not allow as it is validated in a way that it does not allow the space. Now my web development agency is charging a bomb to revalidate just that one text box. can someone help me with the coding or steps involved to validate this text box. And howmuch time will it take. I have a simple html form with 2 text fields and submit button 1 user name 2 pwd/token and 1 checkbox 'First time user' if 'first time user' is selected then the 'Submit' button to be enabled only if the customer puts exactly 6 digits on pwd/token. if it's unchecked then the submit button to be enabled only if the customer enters 10 digits(pin_token code) please send me code will be very thankful for your help Okay I have searched google for hours literally without luck so hopefully someone here can help. What I am trying to do is when someone submits the form if there are empty textboxes change the textbox's style from class="input" to class="inputreq". Someone please help, the formname is "signup" and the textboxes are "domain" and "username". Please help. Thanks. hi all , i want that user can not enter text in multiline textbox more than specific characters but it behaves differently in IE and FF. In Internet explorer when i press enter key it takes two character whereas in firefox when i press enter it takes only one character. so this way user can enter more data in FF which is not correct. how to fix that behavior so that both browsers give same result. My javascript code is given below <HTML> <HEAD> <TITLE> Javascript Character Count by WebSewak.com </TITLE> <script language="Javascript"> function counterUpdate(opt_countedTextBox, opt_countBody, opt_maxSize) { var countedTextBox = opt_countedTextBox ? opt_countedTextBox : "counttxt"; var countBody = opt_countBody ? opt_countBody : "countBody"; var maxSize = opt_maxSize ? opt_maxSize : 1024; var field = document.getElementById(countedTextBox); if (field && field.value.length >= maxSize) { field.value = field.value.substring(0, maxSize); } var txtField = document.getElementById(countBody); if (txtField) { txtField.innerHTML = field.value.length; } } </script> </HEAD> <BODY> <textarea id="counttxt" name="counttxt" rows="10" onkeyup="counterUpdate('counttxt', 'countBody','30');"></textarea> You typed <B><span id="countBody">0</span></b> characters Max. Length : 30 Chars </BODY> </HTML> I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed. I want to be able to do this without having to do a postback. I already have the logic on the code behind and the enquiry object. also I am fairly new to javascript so I have been using mostly jQuery as easier to implement Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hi, I have an application wherein for one page I want to display a Listbox on selection of a radio button. There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options. Can anybody pls help me with this as I'm a beginner to JS.. Many thanks Pooja. Hi, Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="script.js"></script>
<body onload="fillCategory();">
<form id="drop_list" name="form1" method="post" action="">
<label>
<select name="Category" id="Category">
</select>
</label>
</form>
</body>
</html>
and my script.js: Code: function fillCategory(){
addOption(document.form1.Category, "Fiji", "Fiji", "");
addOption(document.form1.Category, "Australia", "Australia", "");
addOption(document.form1.Category, "New Zealand", "New Zealand", "");
}
I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same Code: var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
}
This works fine for me. But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox. Can anyone please advice me with an better solution? I'm probably not allowed to request something like this, but since this is a small amount of code I think I should do it anyways :P Okey, so I have two listboxes and I want a tickbox to enable one listbox and disable one listbox as you tick a checkbox. I want one listbox disabled by default and the other enabled and then vice-verca the disable when you tick the box. If someone could supply me with that code I would be really greatful, butyou don't need to bother with the HTML, I should figure it out from the JS. Thanks in advance <3 Hello, I'm trying to fill an array with the values of a listbox from a SQL query but somehow I can only get the first word of each registry Code:
var arrayX=[];
function getValue(){
var x=document.getElementById("combo_color");
for (var i = 0; i < x.options.length; i++) {
if(x[i].value!=''){
arrayX.push(x[i].value);
}
}
}
for example, with the color Green Karanka I only get Green inside the array, the same happens with any color with more than one word, any ideas? Thanks. Hi, I've been working on a company directory page where a listbox called "People" in a form called "people_form" contains 400 employee names. I made the box "multiple" just so I could have it big and easier to find names but I decided a search box would be really useful. I've looked up a few such search scripts but so far the two I've tried haven't worked. The latest one when it's installed on the page, nothing happens when you type characters into it (it's supposed to jump to an entry matching the first few letters). Although if I backspace then it selects EVERY name in the list Here's the current form with the input tag being the search box (oh the options are populated by java script): <form name="people_form"> <input type="text" id="realtxt" onkeyup="searchSel()"></input> <select onchange="display(this.value); return false;" multiple="multiple" id="People" name="People" style="border-style: none; height:198px; width:220px;"> <option value="">Loading</option> </select></form> And here's the actual search function in the head of the page in the script tags: function searchSel() { var input=document.getElementById('realtxt').value.toLowerCase(); var output=document.getElementById('People').options; for(var i=0;i<output.length;i++) { if(output[i].value.indexOf(input)==0){ output[i].selected=true; } if(document.forms[0].realtxt.value==''){ output[0].selected=true; } } } If you know of a script that will work properly I'd appreciate it. For convenience I'm looking for one that jumps to selections inside the listbox as opposed to one where you click a search button and get results somewhere else. Hi I've been working on a listbox full of employees for our company intranet. Each name has an onchange tag that calls up a floor map and that part works fine but I'd really like to populate the names from an XML list so it's easier for non-IT people to maintain. I've been doing alot of web searches on the subject which comes up alot but it's mostly just fragments of what I need being that I've got no javascript background. I found a helpful tutorial on javascriptkit but that wasn't for creating listboxes so I'm only part of the way there. This is the XML file I've got (there will eventually be 400 entries): <?xml version="1.0"?> <list> <employee> <name>##########</name> <office>1656</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>##########</email> </employee> <employee> <name>#########</name> <office>1657</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>###########</email> </employee> </list> The most important parts are the name which will be used as the text of the box and the office number which will determine which floorplan is displayed. I added the other information so I can potentially put it in a div display later but that can wait. Can anyone help point me to some good resources on this subject? Thanks. Hi there, I have a listbox and an Edit button. The user will need to click on the email address in the listbox before clicking on the button to edit. But then, the email address will be displayed on the prompt box's textbox, and even without editing it, the user can get scot-free. I would want to remove the email address on the prompt box's textbox, and also to check for null entries. If it is null, it will display an alert message. Else, it will check if it is a valid email address. My code is as follow: Code: function editItem()
{
var listbox = document.getElementById('listBox'); // listbox control id
var newValue = lst.value;
if(newValue != "")
{
var newItem = prompt("Enter the new email address",newValue);
if(newItem == "")
{
alert("Please key in an email address into the textbox.");
return false;
}
else
{
listbox.options[listbox.selectedIndex] = new Option(newItem,newItem,false,false);
return false;
arrTexts = new Array();
validRegExp =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
// search email text for regular exp matches
if (arrTexts.value.search(validRegExp) ==-1 )
{
alert('A valid e-mail address is required.\nPlease try again.');
return false;
}
else
{
for(i=0; i<listbox.length; i++)
{
arrTexts[i] = lst.options[i].text;
}
arrTexts.sort();
for(i=0; i<listbox.length; i++)
{
listbox.options[i].text = arrTexts[i];
listbox.options[i].value = arrTexts[i];
}
}
}
}
else
{
alert('Select Item From The List To Edit ');
}
}
HTML Code: select id="lstBxEmail" name="listBoxEmail" size="6" style="width: 580px;"> <option>figFruit@msn.com</option> <option>apple@hotmail.com</option> <option>cherry@yahoo.com</option> <option>banana@hotmail.com</option> <option>elephantApple@ymail.com</option> <option>durian@gmail.com</option> </select> <select id="listBox" name="listBox" size="3" style="width: 580px;"> <option>hello@msn.com</option> <option>wowAmusers@hotmail.com</option> <option>yrulikethis@yahoo.com</option> </select> |
|||||||