I am trying to validate a simple form with JavaScript but cannot get the script to validate. When the Submit button is pressed there is no validation being run. If one of the boxes is left blank, the error message does not pop up to notify the user. However I am not seeing anything out of place. I am wondering if it isthe submit button is not working? Can anyone lend a hand?
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert.("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange(); {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="theName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="theAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick></p>
</form>
<span id="results"></span>
</body>
</html>
Your code had SO many typo's. This works.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
}
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange() {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="txtName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="txtAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick()"></p>
</form>
<span id="results"></span>
</body>
</html>
However be noted that you haven't used txtAge_onBlur or txtName_onChange functions anywhere. Also I suggest to add a numerical check to age field.
onclick="btnSubmit_onclick></p>
to
onclick="btnSubmit_onclick();"></p>
and
function btnSubmit_onclck() {
to
function btnSubmit_onclick() {
You have onsubmit="return validate();" yet I don't see validate() anywhere in your script.
Then in your script you have btnSubmit_onclck(), yet in your HTML you have onclick="btnSubmit_onclick.
So it's missing an i and in the HTML you are missing the closing ".
You also need to check the missing closing } on txtAge_onblur and btnSubmit_onclick
Related
I am trying to write a html/js script to validate a simple login page and on successful login, to redirect to the homepage. What I have so far is not doing the intended when I hit the submit button. Can someone please help? It is much appreciated. My code is:
<!doctype html>
<!-- This is is the main start page saved in index.html -->
<html lang="en-US">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Login details</h2>
<form name="login" action="return validateForm()" action="http://localhost:8080/index.html" method="post">
<fieldset>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<script>
function validateForm() {
var un = document.login.username.value;
var pw = document.login.password.value;
var username = "username"
var password = "password"
if ((un == username) && (pw == password)) {
return true;
}
else {
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}
</script>
With the input from Don't Panic and Ahmed I have corrected the code:
<!doctype html>
<!-- This is is the main start page saved in index.html -->
<html lang="en-US">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Login details</h2>
<form name="login" onsubmit="return validateFormOnSubmit()" action="http://localhost:8080/index.html" method="post">
<fieldset>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<script>
function validateFormOnSubmit() {
var un = document.login.username.value;
var pw = document.login.password.value;
var username = "username"
var password = "password"
if ((un == username) && (pw == password)) {
return true;
}
else {
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}
</script>
Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work
I have a form like this:
<form id="form1" method="post" action="">
<input maxlength="75" size="90" type="text" id="textfield2"/>
</form>
How to show an alert box message when i finish typing?
Thanks
edit
<!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>
<script type="text/javascript" src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function() {
var course_data;
$.get('math.xml', function(data) {
course_data = data;
var that = $('#courses');
$('course', course_data).each(function() {
$('<option>').text($(this).attr('title')).appendTo(that);
});
}, 'xml');
$('#courses').change(function() {
var val = $(this).val();
var that = $('#times').empty();
$('course', course_data).filter(function() {
return val == $(this).attr('title');
})
.find("lesson").each(function() {
$("#lesson").val($(this).text());
});
});
});
</script>
<script type="text/javascript">
function keyPressed(event, input) {
if (event.keyCode == 8) {
return true;
}
var char = event.which ? event.which : event.keyCode;
char = String.fromCharCode(char);
var exerc = ["aaaa aaaa aaaa aaaa","bbbb bbbb bbbb bbbb"];
for (i=0;i<exerc.length;i++){
var option=document.getElementById("courses").selectedIndex;
}
return (exerc[option - 1].charAt(input.value.length) == char);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" maxlength="70" size="90" id="lesson"/>
</form>
<form name="form2" method="post" action="">
<input maxlength="59" size="90" type="text" onkeypress="return keyPressed(event, this);"/>
</form>
<form name="form1">drop1
<select style="width:100px" id='courses'>
<option selected="selected">choose...</option>
</select>
</form>
</body>
</html>
xml:
<courses>
<course title="chap 1">
<lesson>aaaa aaaa aaaa aaaa</lesson>
</course>
<course title="chap 2">
<lesson>bbbb bbbb bbbb bbbb</lesson>
</course>
</courses>
I have two input fields and i use a keypress function to enter only specific chars in the second input. I can enter until the chars from the first field finished. So, when i finished typing i want to appear an alert message like:
alert(ok finish!);
it is possible?
With JQuery you could do this:
$('#textfield2').bind('blur',function() {
alert('I guess i finished typing cause I left the field!?');
});
I am trying to validate this form before it is submitted to the order form page using 'onsubmit' event, but it's not working. Not sure what I'm doing wrong. Also, how do I submit the product(s) selected with price and product ID on to an order form page? I need to use form controls to allow the user to put in personal and billing info (name, address, etc.) Any help with this would be appreciated.
Here's my code I'm trying to validate with 'onsubmit':
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Javascript - Shopping Cart</title>
<script type="text/javascript" charset="utf-8">
function checkCheckBoxes( ) {
if (document.frmTest.product1.checked == false &&
document.frmTest.product2.checked == false &&
document.frmTest.product3.checked == false &&
document.frmTest.product4.checked == false)
{
alert ('You must select a product to continue.');
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<h1>Shopping Cart - Product Page</h1>
<form name="product" method="post" action="" onsubmit="return checkCheckBoxes( );" >
<div id="product1">
<p id="title1"><b>Desktop Computer</b></p>
<img src="images/desktop.jpg" alt="desktop" width="100"/>
<p>The latest in desktop computing.</p>
<p><input type="checkbox" name="product1" id="001">Price $599.99</p>
</div>
<div id="product2">
<p id="title2"><b>Monitor</b></p>
<img src="images/monitor.jpg" alt="monitor" width="100"/>
<p>21 inch monitor</p>
<p><input type=checkbox name="product2" id="002">Price $159.99</p>
</div>
<div id="product3">
<p id="title3"><b>Keyboard</b></p>
<img src="images/keyboard.jpg" alt="keyboard" width="100"/>
<p>USB Keyboard</p>
<p><input type=checkbox name="product3" id="003">Price $39.99</p>
</div>
<div id="product4">
<p id="title4"><b>Mouse</b></p>
<img src="images/mouse.jpg" alt="mouse" width="100" />
<p>USB Keyboard</p>
<p><input type=checkbox name="product4" id="004">Price $25.99</p>
</p>
</div>
<br />
<input type="submit" value="Submit" name="submit" onClick="cart()";/><input , type="reset" value="Reset" name="reset">
</form>
</body>
</html>
Try changing your if statement to use getElementById. I ran your code, but instead used the if statement:
if ( (document.getElementById("001").checked == false) &&
(document.getElementById("002").checked == false) &&
(document.getElementById("003").checked == false) &&
(document.getElementById("004").checked == false))
and it worked.
Change
<form name="product"
to
<form name="frmTest"
If you install a debugger like Firebug, you can call
checkCheckBoxes( );
manually in the console (without submitting the form), so that you can see the error messages generated by the function, which in this case is
TypeError: document.frmTest is undefined
Since the name of the form is "product", "document.frmTest..." should probably be called "document.product..." instead.
I am trying to get this to be if your name is Bob then you are register if not Sorry you are not allowed access but i can not figure out what I am doing wrong can someone help me thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (firstName=="Bob") {
alert("Now registered");
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="BOB">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
var firstName = document.getElementById('firstName').value;
if (firstName=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
} }
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
you have to use onsubmit on form tag and it must return true or false
Note that you are missing the closing braces for the function, this code works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify()
{
var name="Please enter your name: ";
if (myForm.firstName.value=="Bob")
{
alert("Now registered");
}
else
{
alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name=firstName>First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
This should work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">
function verify() {
var firstName = document.getElementById('firstName').value;
if (firstName == "Bob") {
alert("Now registered");
return true;
} else {
window.alert("Sorry you aren't allowed access.");
return false;
}
}
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Update your javascript like so:
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (document.myForm.firstName.value=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
Then update your HTML form to this:
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="firstName" value="">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
your onsubmit should be on the form handler (the open tag of the "form"), not on the button.
Several issues:
You don't have a javascript variable firstName anywhere. The script probably stops there.
Your form markup for the first name field is strange (why are you naming the text box "BOB"? You should give it an ID.
You need to access the form element in javascript properly.
When submitting a form, it is better to use a submit input type and hookup the form onsubmit (in this regard the answer by #Pravat is correct, though not on the other points).
This line does nothing - var name="Please enter your name: ";
Firstly the Javascript does not know what firstname is
To fix this you need to do two things:
Use the HTML <input name="BOB" id="firstName" value="" />. Note the id attribute, we'll use this to let the JS find the element we want to examine.
Then in Javascript we can find what the user has entered in the input using document.getElementById('firstName').value.
This should let you do your comparison.
To fix minor parts of your code, I believe you forgot to open your <body> tag
your also missing a } for your function
self-close your input and br tags
Try to use:
var firstName = document.getElementById('firstName').value;
and put missing } for verify function
see this..., you also have a } missing... just before the < /script> ... the missing } is the one that closes the verify function.