I'm a beginner, and I need some help with my assignment. I can't work out what I've done wrong. The label and submit button appear in html, but when I click on the submit button it doesn't validate the form.
My assignment is to produce a form to enter your name. Onsubmit a function to validate the name is called that will validate that the name cannot be blank and must be more than 6 characters.
<html>
<head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required) <input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
</form>
<input type="submit" name="S1" value="Submit response" />
<script>
function validateForm(){
var firstName=document.getElementById("firstName");
if (firstName.value.length<6){
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
</script>
</body>
</head>
</html>
Place submit button inside of form tag
function validateForm() {
var firstName = document.getElementById("firstName");
if (firstName.value.length < 6) {
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
<html>
<head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required)<input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
<input type="submit" name="S1" value="Submit response" />
</form>
</body>
</head>
</html>
The problem with your code is that you try to return a result to an event. Events do not accept any response. So try this;
<html>
<body>
<form name="myForm" autocomplete="on" onsubmit="validateForm()">
<p>
<label>First name (required)</label>
<input type="text" id="firstName" autofocus="autofocus" />
</p>
<input type="submit" name="S1" value="Submit response" />
</form>
<script>
function validateForm(){
var firstName=document.getElementById("firstName");
if (firstName.value.length<6){
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
document.getElementsByTagName("form")[0].submit()
}
</script>
</body>
</html>
Besides that, you put your body in your head, this can cause trouble with some browsers.
Your submit button is outside of form tag, that's why the onsubmit method is not gettting called.
Problem was in your code. Remember you have to put submit button under <form></form> tag. And always put JS code in <head></head> section.
Find below code and try hope this will work for you.
<html>
<head>
<script>
function validateForm() {
var firstName = document.getElementById("firstName");
if (firstName.value.length < 6) {
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
</script>
</head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm();">
<p><label>First name (required) <input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
<input type="submit" name="S1" value="Submit response" />
</form>
</body>
</html>
Related
When I try printing a js variable in a h1 tag it's just printing for 2 milliseconds and disappears afterwards.
function validateForm() {
// alert("hello");
var name = document.myform.name.value;
document.getElementById("a1").innerHTML = name;
// document.myform.write.value= name;
}
<html>
<head>
<title>
js 1
</title>
</head>
<body>
<form name="myform" onSubmit="return validateForm();">
Name<input type="text" name="name"><br> Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>
</body>
</html>
I want the output to print the name the user enters and it should be visible until the second time the user enters another name.
In your validateForm function you can return false to prevent form from submitting and page from reloading.
function validateForm() {
document.getElementById("a1").innerHTML = document.myform.name.value;
return false;
}
<form name="myform" onsubmit="return validateForm();">
Name<input type="text" name="name"><br>
Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>
This is because the button type is being submit your from is submitted immediately. If you want to stay in the same page,you can either change the type of the button from submit to input.
<input type="button" value="submit"><br>
OR: Use event.preventDefault(); to neutralize the event.
<script type="text/javascript">
function validateForm(){
// alert("hello");
var name=document.myform.name.value;
document.getElementById("a1").innerHTML = name ;
// document.myform.write.value= name;
event.preventDefault();
}
</script>
<form name="myform" onSubmit="return validateForm();">
Name<input type="text" name="name"><br>
Password <input type="text" name="password"><br><br>
<h1 id="a1"></h1>
<input type="submit" value="submit"><br>
</form>
Your form is being submitted immediately, so the page reloads.
Return false from your event handler to prevent that from happening.
function validateForm() {
var name = document.myform.name.value;
document.getElementById("a1").innerHTML = name;
return false;
}
I would like a simple form for an employee to enter an order ID. That ID would be validated from a second input. When it is validated it would be passed to the database through the insert.php on the server.
Below is what I have written so far. I'm stumped on how to push the data on a successful check or clear the form on a fail.
<script type="text/javascript" language="JavaScript">
<!--
//--------------------------------
// This code compares two fields in a form and submit it
// if they're the same, or not if they're different.
//--------------------------------
function checkid(theForm) {
if (theForm.orderid1.value != theForm.orderid2.value)
{
alert('The two values don\'t match! Please check!');
return false;
} else {
return true;
}
}
//-->
</script>
<form action="../" onsubmit="return checkid(this);">
<form action="insert.php" method="post">
<p> Enter the compleated Order ID<br>
<input type="TEXT" name="orderid1" size="20" maxlength="20">
<br>
Please Confirm the order ID!
<br>
<input type="TEXT" name="orderid2" size="20" maxlength="20">
<br>
<input type="SUBMIT" value="Compleate Order!"></p>
</form>
anyway this is the answer for you.
<script type="text/javascript" language="JavaScript">
<!--
//--------------------------------
// This code compares two fields in a form and submit it
// if they're the same, or not if they're different.
//--------------------------------
function checkid(theForm) {
if (theForm.orderid1.value != theForm.orderid2.value)
{
alert('The two values don\'t match! Please check!');
return false;
} else {
return true;
}
}
//-->
</script>
<form action="insert.php" onsubmit="return checkid(this);" method="post">
<p> Enter the compleated Order ID<br>
<input type="TEXT" name="orderid1" size="20" maxlength="20">
<br>
Please Confirm the order ID!
<br>
<input type="TEXT" name="orderid2" size="20" maxlength="20">
<br>
<input type="SUBMIT" value="Compleate Order!"></p>
</form>
I'm having to dip my toe back in the EE and javascript world after many years. What am I doing wrong here... a simple form being submitted, with a JS block to validate during the onsubmit event of the submit button. The alert("Here") message box does not appear when I submit the form, and the form gets submitted successfully, i.e. HelloForm gets displayed, with blank values, so I'm led to believe that validate() is not being called. I've tried this in both the Eclipse internal web browser as well as Chrome and see the same thing both times. I'm assuming that I don't need to explicitly activate javascript in either browser, as it would be on by default.
<html>
<head>
<script>
function validate()
{
alert("Here");
var x = document.forms["inputForm"].["first_name"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="inputForm" action="HelloForm" method="GET" onsubmit="return validate()">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit The Form" />
</form>
</body>
</html>
In this line will throw a syntax error:
document.forms["inputForm"].["first_name"].value
^^^
The statement is wrong, should be without dot between braces:
document.forms["inputForm"]["first_name"].value
//or
document.forms.inputForm.first_name.value
Working with Objects
You can use Html5 Validations.
<form name="inputForm" action="HelloForm" method="GET" >
First Name: <input type="text" name="first_name" required />
<br />
Last Name: <input type="text" name="last_name" required />
<input type="submit" value="Submit The Form" />
</form>
Working Demo
I know there are a few threads on this topic, and in fact I got my code from one such thread, but I just can't seem to get it to run. I'm trying to compare two input boxes in an HTML form using javascript.
Here is my JS:
<script>
function checkform(form1)
{
if(form1.password.value != form1.passwordConfirm.value)
{
alert("Passwords must be the same");
form1.password.focus();
return true;
} else {return false;}
}
</script>
Here is the HTML:
<!Doctype html>
<script type="C:/wamp/www/Table/" src="javascript.js"></script>
<form name="form1" action="demo_form.asp">
Username: <input type="text" name="usrname" required oninvalid="this.setCustomValidity('Username cannot be empty.')">
Password: <input type="password" name="password" required oninvalid="this.setCustomValidity('Password cannot be empty')">
Confirm Password: <input type="password" name="passwordConfirm" required oninvalid="this.setCustomValidity('Password cannot be empty')">
<input type="submit" value="Submit" onClick="return checkform(form1);">
</form>
</html>
Any help would be awesome!
Thanks
Mike
You'll need to assign an id to your form, and get that.
Replace:
<form name="form1" action="demo_form.asp">
With:
<form name="form1" action="demo_form.asp" id="myForm">
And and this:
function checkform(form1){
With this:
function checkform(){
var form1 = document.getElementById('myForm')
You also need to switch your return statements, to return false when the PW's don't match.
The resulting JS / HTML:
function checkform(){
var form1 = document.getElementById('myForm');
if(form1.password.value != form1.passwordConfirm.value)
{
alert("Passwords must be the same");
form1.password.focus();
return false;
}
return true;
}
<form name="form1" action="demo_form.asp" id="myForm">
Username: <input type="text" name="usrname" required oninvalid="this.setCustomValidity('Username cannot be empty.')">
Password: <input type="password" name="password" required oninvalid="this.setCustomValidity('Password cannot be empty')">
Confirm Password: <input type="password" name="passwordConfirm" required oninvalid="this.setCustomValidity('Password cannot be empty')">
<input type="submit" value="Submit" onClick="return checkform();">
</form>
Notice how I removed the else around the second return statement. It's not needed.
Take out return from the onclick.
onClick="checkform(form1);"
I have a page that has 6 forms that all have a value with the same name 'audit_id_upload'. Currently I have one of them being validated (I'm just looking for empty values) with...
function validateForm()
{
var x=document.forms["audit_upload"]["audit_id_upload"].value;
if (x==null || x=="")
{
alert("Please Select an Audit");
return false;
}
}
</script>
Can I adapt this to validate the other forms as well without having to repeat it 5 more times?
Thanks
Since you have a input element with audit_id_upload in every form, you could pass the name of your form to this function and use it to validate the item.
function validateForm(fName)
{
var x=document.forms[fName]["audit_id_upload"].value;
if (x==null || x=="")
{
alert("Please Select an Audit");
return false;
}
return true;
}
and call it on the for onSubmit event.
<form name='f1' onsubmit="return validateForm('f1')">
</form>
<form name='f2' onsubmit="return validateForm('f2')">
</form>
<form name='f3' onsubmit="return validateForm('f3')">
</form>
Try this:
<html>
<script type="text/javascript">
function test(theform)
{
if (theform.thefield.value == "foo") return true;
else return false;
}
</script>
<body>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
</body>
</html>