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>
Related
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>
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);"
How do I validate a specific string of text for input "promo"?
Here's the script I'm using:
<script>
function validateForm()
{
var x=document.forms["myInquiry"]["promo"].value;
if (x==null || x=="")
{
alert("Please Enter Promo Code");
return false;
}
}
</script>
Here's the form. Only relevant code.
<form action="contactdummy.php" name="myInquiry" onsubmit="return validateForm()" method="post" enctype="multipart/form-data">
<input name="promo" type="text" id="promo" size="17" tabindex=4 />
<input name="submit" type="submit" value="submit" />
</form>
use input tag for submit the form inside the form element
<input name="submit" type="submit" value="submit" />
When radio button value is 1 or 2 or 3, I would like to run validation for first and last name.
<form action="index.php" method="post" name="index">
<input type="radio" name="hello" value="abc">
<input type="radio" name="hello" value="def">
<input type="radio" name="hello" value="ghi">
<input type="radio" name="hello" value="jkl">
<input type="radio" name="hello" value="mno">
<input type="text" id="first-name" name="first-name">
<input type="text" id="last-name" name="last-name">
</form>
<script>
if ( $('input:radio[name=hello]:checked').val() == "abc" || $('input:radio[name=hello]:checked').val() == "def" || $('input:radio[name=hello]:checked').val() == "ghi" )
{
if( ($('input[name=first-name]').val().length<1 ))
{
$('#first-name').focus();
return false;
}
if( ($('input[name=last-name]').val().length<1 ))
{
$('#last-name').focus();
return false;
}
}
</script>
I wrote something like this but it doesn't work.
Even I choose value for "mno", the first-name validation work.
Also this function won't validate the last-name.
any idea what i did wrong?
You are using javascript for validation but you should use this javascript in a function and call that function from your form, until it will not work because you are not calling this javascript that mean it is not working.
Here is the simple code for validation by which you can see how to validate a form. hope this code will help you.
<!DOCTYPE html>
<html>
<head>
<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>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
hi
i want two check two fields
if the value of two fields is same then its shows a message two me i have a code but
its not working can you tell me what worng with this code
<script type="text/javascript">
function checkForm(form1){
if(form1.field1.value == form1.field2.value ){
alert(" values are identical");
form1.field1.focus();
return true;
}else{
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkform1(this);" >
</form>
Change your if condition like this
if(document.form1.field1.value==document.form1.field2.value)
You're calling checkform(), but that's not defined anywhere. Also, checkform1(this) uses the button as the element form1, which screws everything up. Use this.parentNode, which passes the form as the argument.
Here's some working code:
<script>
function checkForm(form1) {
if (form1.field1.value == form1.field2.value) {
alert(" values are identical");
form1.field1.focus();
return true;
} else {
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm(this.parentNode);" >
</form>
You need to add document. in front of your form selections. And your method name is wrong from the method you are calling from your click event.
I've fixed it and included an example here : http://jsfiddle.net/jomanlk/Fu2wJ/1/
function checkForm(form1) {
if (document.form1.field1.value == document.form1.field2.value) {
alert(" values are identical");
document.form1.field1.focus();
return false;
}
else {
return true;
}
}
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm();" >
</form>
Apart from the fact that checkForm1 function does not exist , the main problem lies in
<input type="submit" onClick="return checkform1(this);" >
Here the this refers to the input and not the form.
To make your code working change the function name to checkForm and
<input type="submit" onClick="return checkform1(this.form);" >