|
JavaScript - Form Validation - Textbox Color Change
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. Similar TutorialsHello, I need your help. Using Javascript, on mouseover/hover, I would like to change the boder color of my textbox from rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142). I can't figure out where to start or how to get this going. A little help from the experts is needed here. Much thanks and appreciation for your time. Cheers, J Hello. 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! Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm HI i have a complete web site . now , how can do the work that all the textboxes in the page have the style that when the users click on it , the background of them geta color . i don't want to insert this code one by one onclick="this.style.backgroundColor='#eeeeee';" thanks Hi there, I would like to highlight the textbox's border to red when it is not filled, but to no avail. The codes are as shown below, and I hope you guys can help me solve it. Javascript Code: function check(checkForm)
{
var fields = new Array("First Name","Last 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;
if(!isFilled)
{
index[k++] = fields[i];
}
}
if(k.length!=0)
{
joinComma = index.join(', ');
alert('The field(s) corresponding to '+ joinComma + ' is/are not selected.');
return false;
}
}
HTML Code: <label>
*First Name:</label>
<input type="text" id="Text26" name="First Name"/>
<br />
<br />
<label>
*Last Name:</label>
<input type="text" id="Text27" name="Last Name" /><br />
<br />
<label>
*Email Address:</label>
<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 send_check(this.checkForm)"/>
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 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>
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 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> 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)"/> Could anyone show me a script that would allow the user whos on my site change the background image from the default color to an image from a URL? And then it would have to save their choice in a cookie. Thanks!
Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!
Hey Guys, I have this really important question (I'm really stuck! I'm a baby coder ). I have four radio button and four textbox, each one of these textboxes has its own value which is provided from a database, now each one of these textboxes is related to a radio button and what happen is if I select radio button number one then the value of textbox number one is going to change by which is fine but when I'm going to select the other radio buttons (which is obvious that radio button number one is no longer selected) but textbox number one keeps the changed value and don't going back to its default value. let me give you my example (which I working on it right now), I have four textbox and four radio buttons, now my first textbox has a value="1" I select the first radio button and the first textbox value turned to value="2" now I select the second radio button and the second text value change from 1 to 2 just like the first text box (what happened is that the first radio button is deselected but the first textbox value didn’t turn back to its first value which was value="1" and keep the changed value which is value="2" (that happens to all text boxes and radio buttons as well) This is my stupid code: (please help me out here, I'm going to cry, Btw you can completely change the code if you want it’s not important I just need to restore these textbox to their first value if their related radio buttons is no longer selected. one more thing I manage to find a way to do that but I find out it is not stable (onblur) if I click somewhere else in the page (rather than the radio buttons) then the changed value return to default one which is SUCKS! I checked the other event handlers but didn’t work! <script type="text/javascript"> function firstaddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)+1%>" }} </script> <script type="text/javascript"> function secondaddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)+1%>" }} </script> <script type="text/javascript"> function thirdaddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)+1%>" }} </script> <script type="text/javascript"> function fourthaddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)+1%>" }} </script> <script type="text/javascript"> function ReturnFirstAddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)%>" }} </script> <script type="text/javascript"> function ReturnSecondAddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)%>" }} </script> <script type="text/javascript"> function ReturnThirdAddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)%>" }} </script> <script type="text/javascript"> function ReturnFourthAddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)%>" }} </script> Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice1").Value)%> <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice2").Value)%> <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice3").Value)%> <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice4").Value)%> <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> 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 For Script http://www.dynamicdrive.com/dynamici...htmlticker.htm How do I change the "subject" color above each message from the default black to white ? I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/ to sort tables by the header. my problem is I want to add to this that everyother row should have a gray background. I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script? Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! Still need assistance, thanks Okay, so here's an example code of what I'm needing: Code: <html>
<head>
<title></title>
<style type="text/css">
#greenrow {
background-color:#090;
}
#redrow {
background-color:#F00;
}
</style>
<script type="text/javascript">
if (calculate.level.value >= calculate.getElementById('shrimp').value){
class = greenrow;
}
else {
class = redrow;
}
</script>
</head>
<body>
<form name="calculate">
<table>
<tr>
<td><label>
Level<input name="level" type="text" size="5" /></label>
</td>
</tr>
<tr id="shrimp">
<td>Shrimp</td>
<td align="center"><label>
<input type="text" name="shrimp" />
</label></td>
<td colspan="3" align="left">10</td>
</tr>
</table>
</form>
</body>
</html>
Okay so what I want to be done is to get information from the input text area "level" and IF "level" is >= 10...for this one certain row, I want it to get the class #greenrow. Else, class = #redrow. Thanks |
|||||||