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);"
Related
Please take a look at this code, I want to know how to validate all these input elements in this single form using JavaScript.
I know they look the same but i have the names in a separate div. Your corrections and contributions to my form will be very much appreciated.
<form name="myForm">
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="password" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
Yes, You can. Try this to Validate data in Java Script
<form name="myForm" onsubmit="return validateData()">
<input type="text" id="name" name="fname"><br><br>
<input type="text" id="username" name="username"><br><br>
<input type="text" id="email" name="email"><br><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
Then You have to create a javaScript Function to Validate the data as above validateDate(), for this, now your code is
<script>
function validateData() {
var fname = document.getElementById("fname").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
//if name is empty
if(fname == "" || username == "" || email == "" || password == "") {
//SOme Error Code here
alert("Please Fill All the Form Data.");
}
if(username.length < 4 || username.length > 20) {
//SOme Error Code here
alert("username must be less than 20 but more than 4 Characters.");
}
// You can add more filters like password length, and so on by using more if conditions
}
</script>
<body>
<form name="myForm" onsubmit="return validateData()">
<input type="text" id="name" name="fname"><br><br>
<input type="text" id="username" name="username"><br><br>
<input type="text" id="email" name="email"><br><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
That's all. :)
Even though this requires jQuery, it can solve your problem:
To use jQuery Validate you just need to include in your code a version of the jQuery library equal or more recent than 1.7 and a file with the plugin.
See an example:
jQuery('form').validate();
After calling the jQuery.fn.validate method, you can validate your fields using data attributes, that are valid to the HTML5, according to the W3C.
See a example to required field:
<form>
<input type="text" data-required />
</form>
https://plugins.jquery.com/validate/
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 am a novice in web development, I have created a simple html page. The page has two buttons, Submit and Display Data. The Submit button is supposed to post form data to a particular page after validating the form. This button is working fine. I am facing a problem with the Display Data button. The button is supposed to open a separate page and there should not be any kind of form validation. The page is getting open but the form is also getting validated.
The html page:
<html>
<head>
<script>
function validateForm()
{
var name=document.forms["myForm"]["name"].value;
var email=document.forms["myForm"]["email"].value;
var mobile=document.forms["myForm"]["mobile"].value;
var address=document.forms["myForm"]["address"].value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (name==null || name=="")
{
alert("Name must be filled out");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("Not a valid e-mail address");
return false;
}
else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
{
alert("Enter numeric value")
return false;
}
else if (mobile.length != 10)
{
alert("Enter 10 digit mobile");
return false;
}
else if (mobile.charAt(0)=="0")
{
alert("Mobile no should not start with 0");
return false;
}
else if (address==null || address=="")
{
alert("Address must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>Employee Details Entry</h2>
<form name="myForm" action="insertDisplay.php" onSubmit="return validateForm()" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit"> <button onClick="location.href = 'insertDisplay.php'">Display Data</button>
</form>
</body>
</html>
Where am I going wrong? Why is the form validation function getting called?
place
<button onClick="location.href = 'insertDisplay.php'">Display Data</button> this line out of the form...
give this button the type you want to behave it.
<button type="button" onClick="location.href = 'insertDisplay.php'">Display Data</button>
You can take the values out of the form, or you can use, <input type="button"/> tag. It will not submit your form and will work as you intended.
<input type="button" value="display data" onClick="location.href = 'a.php'">
I suppose you also want your datas to be passed to your PHP file after clicking your button ?
If you push the out of the form will not be sended and you'll have no datas.
In fact, you want both buttons to submit your form, but only the first one should validate it ?
If this is it you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" name="typesubmit" value="Submit" onclick="return validateForm();" />
<input type="submit" name="typesubmit" value="Display Data" />
</form>
You'll be abled on your insert.php file to make difference between display and submit by checking $_POST['typesubmit'] value.
And if you want your "display" button to post your form on another php file, you can do this :
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit" onclick="return validateForm();" />
<input type="submit" value="Display Data" onclick="document.myForm.action='display.php';" />
</form>
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>
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);" >