|
JavaScript - Implementing A Custom Function In A Validation Script
I am trying to implement a credit card check function in the validation script.
But whenever i enable the function it bypasses all previous validation checks and just inputs the data, where am i going wrong with this function? Code: function CheckCreditCard(cardtype, cardnumber)
{
var frm = document.forms["OrderForm"];
if (cardtype == "Visa") {
var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
} else if (cardtype == "Master Card") {
var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
} else if (cardtype == "American Express") {
var re = /^3[4,7]\d{13}$/;
}
if (!re.test(cardnumber)) return false;
cardnumber = cardnumber.split("-").join("");
var checksum = 0;
for (var i=(2-(cardnumber.length % 2)); i<=cardnumber.length; i+=2) {
checksum += parseInt(cardnumber.charAt(i-1));
}
for (var i=(cardnumber.length % 2) + 1; i<cardnumber.length; i+=2) {
var digit = parseInt(cardnumber.charAt(i-1)) * 2;
if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
}
if ((checksum % 10) == 0)
return true;
else
sfm_show_error_msg('error message goes here');
return false;
}
HTML Code is: Code: <script language="JavaScript" type="text/javascript">
var frmvalidator = new Validator("OrderForm");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.EnableFocusOnError(false);
// other attributes went here but were removed
frmvalidator.setAddnlValidationFunction("CheckCreditCard");
</script>
FULL Javascript: Attached at a txt file, was too large to post here. Similar TutorialsI am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Currently we have an implementation of Lightbox (not sure which version) on our site that aids in the process of a voting system. I wasn't around when it was created, and after creating a new version of the site, have no idea how to re-integrate it so I was hoping some seasoned JS people out there can help me. Now what happens is that people go to the voting page where the list is populated with entries from a mysql db. The names are clickable and, when clicked, a lightbox should show up with the information about the person and have a vote and close button. The vote button, when pressed, should tick a single vote back in the mysql db, and then take them to a "Thank you for voting, here are the current top 10" type page. That's the overall function. Here's what information I do have so far: In the root directory there's a folder named templates Inside of that, there's a folder called Lightbox inside of Lightbox, there are 3 folders [css, images, and js] The *.js folder has [builder.js, effects.js, lightbox.js, prototype.js and scriptaculous.js] inside When clicking on a name, however, it just takes me to the image as if it's directly linked instead of opening up the Lightbox. So I need some help getting this to work. Hi Guys, Before I get started explaining my problem I would like to make it clear that this is a university web scripting assignment so I will not be asking for answers just advice as im stuck. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
body{font-family: Arial,sans-serif; background-color: #86bfc9;}
#content{float:right; width: 75%;}
</style>
<script type = "text/javascript">
function showit(what,where)
{
var node = document.getElementById(where);
while( node.firstChild )
node.removeChild( node.firstChild );
node.appendChild( document.createTextNode(what) );
}
function hello()
{
alert("I'm a Computer Solutions Degree student,\n get me out of here");
}
function timestable()
{
str="you code times table here";
showit(str,"Results");
}
function formattedtimestable()
{
str="you code formatted times table here";
showit(str,"Results");
}
function alerttimestable()
{
str="you code alert times table here";
// you code here
alert(str);
}
</script>
</head>
<body>
<h1>JavaScript Exercises </h1>
<div id="content"> <div id = "Results"></div> </div>
<a href="#" OnClick = "hello()">Hello Alert</a> <br/><br/>
<a href="#" OnClick = "timestable()">Times Tables</a> <br/><br/>
<a href="#" OnClick = "alerttimestable()">Times table in an alert box</a>
<br/><br/>
<a href="#" OnClick = "formattedtimestable()">Times Tables in a Table</a>
<br/><br/>
</body>
</html>
I have been given this skeleton code and need to created the relevant times tables so a times table in a alert box, a times table in a table and a standard times table. Now the problem isn't creating the table as that's easy the problem is with the showit function. When I use the function it only prints the string once and nothing else so for example if I did for(x = 0; x< 9; x++) { showit(x, "Result"); } it will only show 8 not 1-2-3-4-5-6-7-8. or if i did showit("Danny", "Result"); showit("Joe", "Result"); it will only output Joe not Danny. The content needs to go in the content div and I cant make it output more than one thing which of course is a problem as I need to output the times tables. Sorry for the poor explanation. Hope someone can shed some light on this Many Thanks Danny i have two scripts using jquery 1) custom scrollbar content 2) fade in out slideshow. they both work individually well. but when i put them together on one page the customscrollbar doesnt work. here are sample scripts 1) http://jsfiddle.net/3PaNV/ 2) http://jsfiddle.net/BM3S3/1/ 3) http://jsfiddle.net/MP6Lt/ Thanks for any suggestions or help in advance I am not very knowledgeable with javascript. I have the following code pasted into my website and it works, but I want to modify it in the following ways: 1) I want the text to only scroll for a maximum of two visible lines at a time. 2) I want the text to scroll only once and then remain in place. 3) I want the text color to be grey (#ABABAB) --------------------- Here is the code I am using: --------------------- <script type="text/javascript"> window.onload = WindowLoad; var _hsSpeed=50; //lower value means faster speed! var _hsData=new Array(); var _hsCounter=0; function WindowLoad(event) { InitializeHorizontalScroll(); } function InitializeHorizontalScroll() { var arrElements = document.getElementsByTagName("span"); for (var i=0; i<arrElements.length; i++) { var element=arrElements[i]; if (element.getAttribute("horizontalscroll") == "1") { _hsData[_hsCounter] = new Array(); _hsData[_hsCounter]["element"] = element; _hsData[_hsCounter]["text"] = FindInnerText(element); _hsData[_hsCounter]["index"] = 0; _hsCounter++; } } if (_hsCounter > 0) window.setTimeout("HorizontalScrollTimer();", 100); } function HorizontalScrollTimer() { for (var i=0; i<_hsData.length; i++) { var element = _hsData[i]["element"]; var strText = _hsData[i]["text"]; var index = parseInt(_hsData[i]["index"]); element.innerHTML = strText.substr(0, index+1); index++; if (index >= strText.length) index = 0; _hsData[i]["index"] = index; } window.setTimeout("HorizontalScrollTimer();", _hsSpeed); } function FindInnerText(objControl, innerText, nestingLevel) { if ((typeof nestingLevel != "undefined")&&(nestingLevel > 100)) return innerText; if (typeof innerText == "undefined") innerText = ""; if (!objControl) return innerText; if (typeof nestingLevel == "undefined") nestingLevel = 0; var text=objControl.nodeValue; if (!text) text = ""; if (objControl.nodeName.toLowerCase() == "br") return "\n"; for (var i=0; i<objControl.childNodes.length; i++) { text += FindInnerText(objControl.childNodes[i], objControl.childNodes[i].nodeValue, nestingLevel+1); } return text; } </script> --------------------- And this is inserted in the body of the page: --------------------- <span horizontalscroll="1" style="font-family: helvetica;text-transform: uppercase;font-size: 10; letter-spacing: 3; font-color: #ABABAB;">text content</span> --------------------- Thank to anyone who can assist. --------------------- Hello, I'm building a simple custom dropdown menu for a web-site so that I can control look and feel as well as the behavior of an iframe. I've set it up so that when the user clicks on any of the menu's active components, an "if" sequence in the clickHandler() function is activated that gets the element's class. If the event occurred on a dropdown option, the event-target id is checked, and the appropriate function is called. At least this is how it's supposed to work. All of the drop-down options have been assigned the "dmo" class. When I test the menu and click on other elements, it works fine. But when I click the "dmo" drop-down options, nothing happens. Firebug and IE Explorer Developer Tools both show no errors, but on clicking a dropdown option, the correlate code doesn't run at all, and after hours of head-banging, I have no idea why. I need help on this one. Here's the code. 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>
<style type="text/css">
BODY {
background:#000;
}
.DropMenu {
width:228px;
height:1.5em;
}
.DropMenu span {
color:#FFF;
font-size:0.875em;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
}
.DropMenuLabel {
float:left;
width:85px;
height:1.5em;
padding:0.2em 0 0 0;
text-indent:0.3em;
}
.DropMenuTopList {
width:130px;
float:left;
height:1.5em;
padding:0 0 0 0;
cursor:pointer;
}
.DropMenuTopList img {
padding:0.4em 0 0 0.3em;
cursor:pointer;
}
.DropMenu span {
color:#FFF;
font-size:.875em;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
vertical-align:center;
}
#dropMenuButton {
cursor:pointer;
}
#dropMenuOptions {
position:relative;
width:130px;
left:85px;
padding:0.2em 0 0 0;
visibility:hidden;
cursor:pointer;
}
.MenuList {
list-style-type:none;
top:0;
left:0;
width:100%;
margin:1.5em 0 0 0;
padding:0;
}
.MenuList li{
height:1.5em;
margin:0.2em 0 0 0;
padding:0;
width:100%;
background-color:#666;
border-color:#AAA;
border:0.5px solid;
text-indent:0.3em;
}
.dmo {
z-index:100;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function()
{
setBehavior();
}
function setBehavior()
{
/*
var downButton = document.getElementById('dropMenuButton')
downButton.onclick = new Function ( "showMenu()" );
*/
window.onclick = new Function ( "evt" , "clickHandler( evt )" );
}
function clickHandler( evt )
{
var dropMenu = document.getElementById('dropMenuOptions');
var e = evt;
var targ;
if (e.target) {targ = e.target}
else if (e.srcElement) {targ = e.srcElement}
var targClass = targ.getAttribute('class');
/* classnames
dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
dmo - option - once clicked, this should turn the dropdown visibility off
*/
var exclude = ("dmb" || "dmo")
if (targClass != exclude )
{
hideMenu()
}
else if (targClass == "dmb" )
{
if (dropMenu.style.visibility == "visible") { hideMenu() }
else showMenu();
}
else if (targClass == "dmo" )
{
if ( targ.id == "option1" ){ window.open(www.bing.com,"Bing") }
else if ( targ.id == "option2" ){ window.open(www.bing.com,"Bing") }
else if ( targ.id == "option3" ){ window.open(www.cuil.com,"Cuil") }
hideMenu();
}
}
function showMenu()
{
var dropMenu = document.getElementById('dropMenuOptions');
dropMenu.style.visibility= "visible";
}
function hideMenu()
{
var dropMenu = document.getElementById('dropMenuOptions');
dropMenu.style.visibility= "hidden";
}
</script>
</head>
<body>
<div id="customMenu" class="DropMenu">
<span>
<div class="DropMenuLabel">Options:</div>
<div class="DropMenuTopList dmb" id="dropMenuTopList">Temp Text
<img class="dmb" id="dropMenuButton" src="Assets/Buttons/DropMenuDownButton.png">
</img>
</div>
<div class="dmo DropMenuOptions" id="dropMenuOptions">
<ul id="menuList" class="dmo MenuList">
<li id="option1" class="dmo">Option1</li>
<li id="option2" class="dmo">Option2</li>
<li id="option3" class="dmo">Option3</li>
</ul>
</div>
</span>
</div>
</body>
</html>
I have a website that uses a php contact form with recaptcha, I would like to add a javascript for the validation of the form. How would I refer to the form? I have this in my form code. Is that enough? or do I have to add an event handler or something else, also do I need to specify a path or will it just go to validate.js? New to Javascript Code: <form id="form" action="process.php" enctype="multipart/form-data" method="post" name="form_to_email" onsubmit="return Validate();"> Hi Guys, Im new to JS and need some help.. I have a contact form on my webpage and i want to put in an alert box if people done enter a field. Below is the html i have for the form PHP Code: <form id="form" method="post" action="consultation.php" onsubmit="return validate(this)"> <p> <label>Name:</label> <input type="text" name="name" id="name" /> </p> <p> <label>Company:</label> <input type="text" name="company" id="company" /> </p> <p> <label>Email:</label> <input type="text" name="email" id="email" /> </p> <p> <label>Phone:</label> <input type="text" name="phone" id="phone"/> </p> <p style="margin-bottom:0px"> <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit" /> </p> </form> and here is the external Java Script file that iv made so far PHP Code: var nName = nForm['name']; var nCompany = nForm['company']; var nEmail = nForm['email']; var nPhone = nForm['phone']; if (nName.value.replace(/s/g, "").length < 1) { alert('Please enter your full name'); return false; } if (nCompany.value.replace(/s/g, "").length < 1) { alert('Please enter your company name'); return false; } if (!/^w+[w|.|-]{0,1}w*[w|.|-]{0,1}w*@w+[w|-]{0,1}w*[w|-]{0,1}w*.{1,1}[a-z]{2,4}$/.test(nEmail.value)) { alert('Please enter your correct email address'); return false; } if (!/[ds-]+$/.test(nPhone.value) || !/d{10}/.test(nMobile.value.replace(/[s-]/g, ""))) // must contain 10 digits; { alert('Please enter your correct phone number'); return false; } iv referenced this Java script file in the head of the html document.. Can anyone help me make this script please... THanks I am trying to design a webpage but no matter how i design it, IE seems to show totally different design then firefox/chrome/safari. Is there any website i can goto which will take my CSS/Script input and give me the IE version of it so it can work on all browsers without any issue? Thanx So if both validations work seperatley (if I just put radio buttons validation in the function without the spinner validation then radio buttons validation works and same vise versa), how come when I put both validations in the function, the top validation which is the radio validation works but the bottom validation which is the spinner validation does not display a message when it is suppose to? Code is below: Code: <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function validation() {
var errMsgO = document.getElementById("radioAlert");
var btnRadioO = document.getElementsByName("sessionNo");
var isbtnRadioChecked = false;
var errQuesMsgO = document.getElementById("numberAlert");
var questionNumberO = document.getElementsByName("txtQuestion");
for(i=0; i < btnRadioO.length; i++){
if(btnRadioO[i].checked){
isbtnRadioChecked = true;
}
}
if(!isbtnRadioChecked) {
errMsgO.innerHTML = "Please Select the Number of Sessions you Require";
} else {
errMsgO.innerHTML = "";
}
return false;
if(questionNumberO[0].value == 0){
errQuesMsgO.innerHTML = "Please Set the Number of Questions";
} else {
errQuesMsgO.innerHTML = "";
}
return false;
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<table>
<tr>
<th>2: Number of Sessions :</th>
<td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td>
</tr>
</table>
<div id="radioAlert"></div>
<table>
<tr>
<th>Number of Questions:</th>
<td class="spinner"><textarea class="spinnerQuestion" name="txtQuestion" id="txtQuestion" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnQuestionUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnQuestionDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
</tr>
</table>
<div id="numberAlert"></div>
<p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation()" /></p> <!-- Prepare Questions here-->
</form>
</body>
"<scr'+'ipt type="text/javascript" src="js/val_feedback_Email.js<\/scr'+'ipt>" How should I call the js validation script for a feedback form that was document.written in a pop up? I have a page which contains a button. Onclick it produces a pop up window that contains a small feedback form produced by document.write. This much works. NOW I need to call the js validate script but nothing seems to work I tried this is the head of the page <script type="text/javascript" src="js/val_feedback_Email.js"> I tried this is the head of the doumnet.write part "<scr'+'ipt type="text/javascript" src="js/val_feedback_Email.js<\/scr'+'ipt>" How do I call the js script to validate the form in the pop up? Where if anywhere should it go? I'm stumped Any and all ideas welcomed LT THis is the start of my script Code: <script type="text/javascript">
var newWindow;
function subWrite() {
newWindow = window.open("","","status,height=500,width=700")
//bring subwindow to front
newWindow.focus();
//assemble content for new window
var newContent = '<html><head><title>ACES UK. Send us your Email</title>';
newContent += '</head><body>';
newContent += '<form action="feedback.php" method="post" name="feedback_1" id="feedback_1" onsubmit="return validate(this.form)"';
Hello All, I am not too good with javascript so I apologise in advance! I have a website form where people input their contact details and I need a script which allows the form to be submitted if the telephone number is correct and returns an error if the number is invalid, (preferably in a pop-up box - not on another page) which says something like "The telephone number you have entered is invalid. Please enter a valid UK landline or mobile number". For the number to be valid, it has to either start with an "01", an "02" or an "07" and be either 10, or 11 digits long. The user should also be able to enter space without an error (ie, the script should ignore spaces). Any suggestions would be much appreciated. Regards, AC Hi there, I'm fairly new to Javascript, though have a good deal of experience with C# and HTML. I am having trouble getting a form to validate when it is submitted. My goal is that if a checkbox is checked (allowing the user to request more information via email) that the email address textbox should also verified to be filled out. What I have is a script in the page body, that (I believe) validates the two form elements, and the form has an onsubmit tag to run the javascript. However, everytime I run a test on the page, it submits regardless of if there is or isn't anything in the email field, with the box checked. Any guidance would be appreciated! Code: <script type="text/javascript">
function validate(){
if(document.getElementById('00N50000002tarI').value == '1' && document.getElementById('email').value == ''){
alert('Please enter your email address');
return false;
}
</script>
<form class="apply_now_form" action="test.php" id="apply_now_form" method="POST" onsubmit="return validate();">
<div class="text"><label for="email">Email</label> <input id="email" type="text" name="email" maxlength="80" /></div>
<div class="check"><font color="#006e92"><input id="00N50000002tarI" name="00N50000002tarI" type="checkbox" value="1" />*I would like to receive the latest updates via email.</font><br></div>
<div class="submit"><input class="c pill-button" type="submit" name="submit" value="Apply Now!"/></div>
</form>
Note: This form was generated by SalesForce Web-to-lead, so I cannot modify form field names, and the form is running on WordPress, in an blank page template (so there shouldn't be any WordPress code muddling with the form). I wanted to make it so that a button on the webpage validates a word that a user types into a prompt box that pops up when they open the webpage. For example, user goes on website, prompt box opens, user types in word then presses OK. On the webpage he clicks the button, which calls a while function to check if the word has a P at the start, a J somewhere in it, and is longer than 8 characters. Code: <script type="text/javascript">
var strWord;
function validateWord()
{
while(strWord == document.formname.validateWord.value.length > 8 && var iChars =
"JP";)
{
"alert(Correct)"
value="Word Alert">
}
}
</SCRIPT>
I've been trying this script but with no luck and cant tell whats wrong with it. Any ideas? I have two seperate js files. One that houses the functions mylibrary.js and another that call the validated functions myform.js. I can not get the form to validate any data. The data just sits there and will not report errors. Any help would be greatly appreciated. Code: function valForm()
{
if(!isAlpha(document.myform.firstname.value))
{
myform.firstname.focus();
return false;
}
if(!validEmail(document.myform.email.value))
{
myform.email.focus();
return false;
}
if(!isRequired1(document.myform.options.value))
{
myform.options.focus();
return false;
}
return true;
}
// JavaScript Document seperate js file mylibrary.js
function isNumber(num) { return !(/\D/.test(num)); }
function isAlpha(text){ return text.match(/\w+/) }
function validEmail(email){ return email.match(/^([a-zA-Z0-9]{3,})(((\.|\-|\_)[a-zA-Z0-9]{2,})+)?@([a-z]{3,})(\-[a-z0-9]{3,})?(\.[a-z]{2,})+$/i ) }
function isRequired1(){
if(myform.food.selectedIndex ==0)
{
alert("Please select from the drop-down list.");
}
}
Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened. Thanks in advance to anyone who can help out a newbie in need. Code: function uservalidate() {
if (document.getElementById("user").value < 5)
{ document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
else
{
document.getElementById("userdiv").innerHTML = ""
}
}
Code: <body>
<form id="form1">
<input type="text" id="user" onblur="uservalidate()" />
<div id="userdiv"></div>
</form>
</body>
</html>
This may seem a long shot, but 5 years ago I found a script that had everything (not just alpha, etc, but everything). I have looked at Jquery validation and while it is robust, many of the examples were bugged. I am no coder, and I feel like I may be torched here for wasting precious space. However, I was really hoping you all could point me in a right direction. Perhaps if not java, with something else. Paid, Donate, Free. Anything. (The only script I have on form now is just Auotab next/prev plugin for jquery) Function required: Inline on change/next type matching (confirm email/pw fields) basic formatting (numeric only, alpha with spaces, etc) Basic validation of email type expressions, etc Required fields, etc However, I would love to take it a step further Email: Checks for valid TLD Password: sctricter requirements Phone: Requires legitimate values (not just numeric); ie: 201-999, no 555, 411,611,911, etc Date of birth: Checks valid ranges of dates entered; checks min/max age requirement Possible real time database or web services checks (which would be ajax, etc im sure) custom number values (ie, for credit cards, number must be xxxx-xxxx (not 0000-1111-2222-3333 Any other possible logical info, for instance, Name not in badnames list (like Fred Flinstone, IP Freely, or other Cuss words/phrases) Yes, I know most of these would wind up as a server side reject on the submit page, where we could possibly recapture the data. However, that type of method typically lowers conversions. Yes, there is the Jquery plugin, and with knowhow, you can make it do this, however I dont have the knowhow and would rather donate/pay for something already out of the box. The use for this would be contact forms, profile forms, info requests, sales pages, Hi coders, I have a form where customers can register thierselves by entering the relevant fields. There is a control() javascript which ckecks if everything on the form is ok before submitting it. Althugh IE applies the script for its every check, Firefox only applies the first check (first if statement) of the script. The rest is ignored. Here is the javascript code: Code: function control()
{
if (document.member.FirstName.value == ""){
document.member.FirstName.focus();
alert("Please fill the name field");
return false;
}
if (document.member.FirstName.value.length<2) {
alert("Name field cannot be shorter than 2 characters.");
document.member.FirstName.focus();
return false;
}
if (/[\d]/.test(document.getElementById("FirstName").value)) {
alert("Entered numbers into the Name field");
return false;
}
if (document.member.LastName.value == ""){
document.member.LastName.focus();
alert("Please fill the Lastname field");
return false;
}
if (document.member.LastName.value.length<2) {
alert("Lastname field cannot be shorter than 2 charcters. Please check again.");
document.member.LastName.focus();
return false;
}
if (/[\d]/.test(document.getElementById("LastName").value)) {
alert("Entered numbers into the Lastname field");
return false;
}
if (document.member.Address1.value.length<10) {
alert("Address field contains less than 2 characters.");
document.member.Address1.focus();
return false;
}
if (document.member.Username.value == ""){
document.member.Username.focus();
alert("Username field cannot be blank");
return false;
}
if (document.member.Address1.value == ""){
document.member.Address1.focus();
alert("Address field cannot be blank ");
return false;
}
if (document.member.City.value == ""){
document.member.City.focus();
alert("City field cannot be blank");
return false;
}
if (document.member.Email.value == ""){
document.member.Email.focus();
alert("E-Mail field cannot be blank.");
return false;
}
if (echeck(document.member.Email.value)==false){
document.member.Email.focus();
return false;
}
if (document.member.PhoneNumber.value == ""){
document.member.PhoneNumber.focus();
alert("Phone number field cannot be blank");
return false;
}
if (!/^\d*$/.test(document.getElementById("PhoneNumber").value)) {
alert("Entered characters into the Phone Number field");
return false;
}
if (document.member.Pass.value == ""){
document.member.Pass.focus();
alert("Password field cannot be blank.");
return false;
}
if (document.member.Pass2.value == ""){
document.member.Pass2.focus();
alert("Password confirmation field cannot be blank.");
return false;
}
if (document.forms[0].Pass.value.length<6) {
alert("Password field cannot contain less than 6 characters. Please check");
document.member.Pass.focus();
return false;
}
if (document.member.Pass.value != document.member.Pass2.value) {
alert("Password and password confirmation fields are not identical. Please check ");
document.member.Pass.focus();
return false;
}
if (!isTelNum(document.forms[0].PhoneNumber,'Telefon ')) return false;
if (!isNum(document.forms[0].InternalPhoneNumber,'Internal Phone number')) return false;
//if (!isValidEmail(document.forms[0].Email)) return false;
return true;
}
Well its interesting that only the first check is taken into consideration. if (document.member.FirstName.value == ""){ The rest is not even seen. Even if you do not fill the rest of the form, the submit button tries to submit the form regardless what more needs to be checked. Here is the submit button: Code: <input type="submit" name="member" value="Register Me" id="member" onclick="return control()";> Any observations and comments are appreciated. |
|||||||