<?php
if (isset($_POST['submit']) ) {
//send to database
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function validateForm() {
var usernameentry = document.forms["registrationform"]["username2"].value;
var passwordentry = document.forms["registrationform"]["password2"].value;
var nameentry = document.forms["registrationform"]["password2"].value;
var emailentry = document.forms["registrationform"]["email"].value;
var atpos = emailentry.indexOf("#");
var dotpos = emailentry.lastIndexOf(".");
if (usernameentry.length < 3 || username.length > 20){
alert("Username must be inbetween 4 and 20 characters");
return false;
}
else if (passwordentry.length < 3 || password.length > 20){
alert("Password must be inbetween 4 and 20 characters");
return false;
}
else if (nameentry.length < 3 || name.length > 45){
alert("Name must be inbetween 4 and 45 characters");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=emailentry.length || emailentry.length > 154) {
alert("Not a valid e-mail address");
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<form name="registrationform" method="post" action="login.php" onsubmit="return validateForm();">
Name: <input type="text" name="name"/>
<br/>
<br/>
Email: <input type="text" name="email"/>
<br/>
<br/>
Username: <input type="text" name="username2"/>
<br/>
<br/>
Password: <input type="password" name="password2"/>
<br/>
<br/>
<input type = "submit" name = "submit" value = "submit" />
<br/>
<br/>
</form>
</body>
I want the contents of the if statement to run ONLY when the form has been validated with JavaScript, it runs regardless of whether the value returns is true or false.
I'm guessing what I need to do is similar to
if (isset($_POST['submit']) && onsubmit == true)
Obviously that's not right, but I don't know how to do it.
I know validating with php is a much more logical approach, but I need to demonstrate use of JavaScript.
You don't need to do that. When the form is validated, it will be sent to login.php
You can see this question HTML/Javascript: Simple form validation on submit
Also, there are a lot of libraries which could help you
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
Related
please check the code
function validate() {
var name = document.getElementById("name");
var pwd = document.getElementById("pwd");
if (name == null || name == "") {
alert("Name can't be blank");
return false;
} else if (pwd.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
}
<form>
username: <input type="text" id="name"></input>
<br>
password: <input type="password" id="pwd"></input>
<br>
<button onclick="validate()">Submit</button>
</form>
function validate() {
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
if (name === null || name === "") {
alert("Name can't be blank");
return false;
} else if (pwd.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
}
<form>
username: <input type="text" id="name"></input>
<br>
password: <input type="password" id="pwd"></input>
<br>
<button onclick="validate()">Submit</button>
</form>
There's a much easier way to do what you are trying to do. You can use the native properties of form to your advantage:
<form>
Username: <input type="text" minlength="2" required>
<br> Password: <input type="password" minlength="6" required>
<br>
<button type="submit">Submit</button>
</form>
HTML elements should be before javascript, like this:
<!DOCTYPE html>
<html>
<body>
<form>
username: <input type="text" id="name"></input>
<br>
password: <input type="password" id="pwd"></input>
<br>
<button onclick="validate()">Submit</button>
</form>
<script>
function validate() {
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
if (name == null || name == "") {
alert("Name can't be blank");
return false;
} else if (pwd.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
</body>
</html>
You haven't provided the full code, so we can't really help you. As far as i can see you didn't make the alert for succesful validation.
You need to get the value, so you need to add .value to the getElement functions.
My code currently validates that the name/email and postcode is valid before being able to send when there is NO address that the information is meant to go to in the form action ="". But when I put the address it's meant to go to it completely skips the validation and just sends whatever, empty or not empty.
Trying to re-position the form action, but really have no idea.
<html>
<head>
<title>Online Food Delivery Form</title>
<h1>Online Food Delivery Form</h1>
</head>
<body>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"
method="get" onsubmit="return validation();">
Name* : <input type="text" name="name" id="name">
<br />
<br />
Email* : <input type="email" name="email" id="email">
<br />
<br />
Postcode* : <input type="text" name="postcode" id="postcode" size="10">
<input type="reset" value="Reset"></button>
<input type="submit" name="submit" value="Submit"/>
</form>
<div id="eresult" style="color:red;"></div>
<script type="text/javascript">
function validation(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var postcode = document.getElementById('postcode').value;
if(name=='' || postcode=='' || email==''){
document.getElementById("eresult").innerHTML = "Name, Email and Postcode
are required.";
return false;
}
else if(name.length<3){
document.getElementById("eresult").innerHTML = "Name must be more than 3
characters.";
return false;
}
else if(postcode.length<4){
document.getElementById("eresult").innerHTML = "Postcode must be atleast
4 characters.";
return false;
}
else {
return true;
}
}
</script>
</body>
</html>
Expected results is for the code to validate that the email/name and postcode is correct before sending the information to the designated site. But it's doing complete opposite.
In your validation, your error messages are multi-line strings
if(name=='' || postcode=='' || email==''){
document.getElementById("eresult").innerHTML = "Name, Email and Postcode
are required.";
return false;
}
else if(name.length<3){
document.getElementById("eresult").innerHTML = "Name must be more than 3
characters.";
return false;
}
else if(postcode.length<4){
document.getElementById("eresult").innerHTML = "Postcode must be atleast
4 characters.";
return false;
}
If you open up the developer console (usually F12), you'll see an error caused by an Invalid or Unexpected Token. Change these error messages to fit on one line to fix this error:
if(name=='' || postcode=='' || email==''){
document.getElementById("eresult").innerHTML = "Name, Email and Postcode are required.";
return false;
}
else if(name.length<3){
document.getElementById("eresult").innerHTML = "Name must be more than 3 characters.";
return false;
}
else if(postcode.length<4){
document.getElementById("eresult").innerHTML = "Postcode must be atleast 4 characters.";
return false;
}
Also, you have a closing </button> tag but no opening one! Remove that tag from the line <input type="reset" value="Reset"></button>.
Hope this helps!
Here is a bit of code I have sourced from w3schools which shows that whenever a name is over 10 characters, the page should add a bit of text, in this case, it should add on "hi", but instead, it removes everything from the page and goes onto a new page and only displays "hi". How can I resolve this?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" onsubmit="return myFunction()">
Name (max 10 characters): <input type="text" id="fname" size="20" name="fname"><br>
Age (from 1 to 100): <input type="text" id="age" size="20" name="age"><br>
E-mail: <input type="text" id="email" size="20" name="mail"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
var at = document.getElementById("email").value.indexOf("#");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) {
document.write("hi");
}
if (isNaN(age) || age < 1 || age > 100) {
alert("The age must be a number between 1 and 100");
submitOK = "false";
}
if (at == -1) {
alert("Not a valid e-mail!");
submitOK = "false";
}
if (submitOK == "false") {
return false;
}
}
</script>
</body>
</html>
Simply put, don't use document.write(). If you read the nice orange text at the top of the documentation, you'll see why:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
document.write() should only be used while a page is loading, to ouput while it's creating the webpage, and should not be used afterwards. Consider creating a div, and writing to there instead:
function myFunction() {
var at = document.getElementById("email").value.indexOf("#");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) {
document.getElementById('result').innerHTML = 'Fname is > 10!';
}
if (isNaN(age) || age < 1 || age > 100) {
alert("The age must be a number between 1 and 100");
submitOK = "false";
}
if (at == -1) {
alert("Not a valid e-mail!");
submitOK = "false";
}
if (submitOK == "false") {
return false;
} else {
alert('Submitted Successfully!');
return false; // Returning false here just for SO Code Snippet
}
}
<form action="/action_page.php" onsubmit="return myFunction()">
Name (max 10 characters): <input type="text" id="fname" size="20" name="fname"><br>
Age (from 1 to 100): <input type="text" id="age" size="20" name="age"><br>
E-mail: <input type="text" id="email" size="20" name="mail"><br><br>
<input type="submit" value="Submit">
<div id="result"></div>
</form>
Additionally, I notice you're setting submitOK = "true". Javascript does have booleans (See this also). Why not use that instead?
submitOK = true;
if (fname.length < 10) {
alert('Your name should be more than 10 characters');
submitOK = false;
}
if (submitOK) { // Same as "if (submitOK == true)"
//Good to go
}
I'm trying to figure out how to make the alert code "First and Last Name must be filled out" if both of the fields of the form have no information inserted. I know how to do them individually, but how do you do make an alert code for both messages combined on one line? I am pretty new to Javascript..
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["lname"].value;
if (x == null || x == "") {
alert("First Name is missing information");
return false;
}
else (y == null || y == "") {
alert("Last Name is missing information")
return false;
}
else (x == null || x == "" && y == null || y == "") {
alert("First and Last name are missing information")
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Delete all your JavaScript.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" method="post">
First Name: <input type="text" name="fname" required /><br />
Last Name: <input type="text" name="lname" required /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Notice the required attribute on the form.
Don't use JavaScript to do HTML's job.
Your logic needs to be reversed so that the case where both are null is checked first or the code will never get to it because either the x or y case happens first. Try:
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["lname"].value;
var emptyX = x == null || x == "";
var emptyY = y == null || y == "";
if (emptyX && emptyY) {
alert("First and Last name are missing information")
return false;
}
else (emptyX) {
alert("First Name is missing information");
return false;
}
else (emptyY) {
alert("Last Name is missing information")
return false;
}
You should move your final else statement to the top. As your code currently exists, both fields will not be checked if either the first or last names are found to be empty.
Alternatively, you could add logic in each of x and y to check if the other is not empty but this isn't necessary if you just reverse the code.
Can't for the life of me figure this out. any help would be greatly appreciated!
This is the message I receive in Google Chrome when I test the script:
Navigated to http://localhost/contact.php
form2.js:2 Uncaught ReferenceError: form is not definedform2.js:2 validatecontact.php:24 onsubmit
Navigated to http://localhost/contact.php
My contact.php file:
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="form2.js"></script>
<?php require 'Includes/Header.php'; ?>
<div class="wrapper">
<div id="contact-form">
<h5>Contact Form</h5>
<form name="contact" form method="post" action="contact.php"
onsubmit="return validate(contact)">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
<div class="clear"></div>
</div>
</div>
<?php require 'Includes/Footer.php'; ?>
My form2.js file:
function validate(contact){
var name = form.name.value;
var email = form.email.value;
var message = form.message.value;
if (name.length == 0 || name.length > 200)
{alert ("You must enter a name.");
return false;
}
if (email.length == 0 || email.length > 200)
{alert ("You must enter a email.");
return false;
}
if (message.length == 0)
{alert ("You must enter a message.");
return false;
}
return true;
}
form is a javascript object. That object does not exist within this file, which is why the error is being thrown. If you want to validate this form, you need to get a reference to it from the DOM first, using document.contact.
function validate(contact){
var form = document.contact,
name = form.name.value,
email = form.email.value,
message = form.message.value;
if (name.length == 0 || name.length > 200) {
alert ("You must enter a name.");
return false;
}
if (email.length == 0 || email.length > 200) {
alert ("You must enter a email.");
return false;
}
if (message.length == 0) {
alert ("You must enter a message.");
return false;
}
return true;
}
try using jquery by adding
<script type="text/javascript" charset="utf-8" src="./jquery-1.9.1.js" />
to the header (you will have to download it or then add:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
to get the latest)
then in your function get the values of the input fieds as follow:
var name = $('#name').value;
var email = $('#email').value;
var message = $('#message').value;
Access forms like this
<form action="#" name="test_form">
<input name="firstname" value="hello world"/>
</form>
var valueOfInput = document.test_form.firstname.value
you can also go like documents.forms["test_form"].elements
so maybe passing in document.contact can help ...
otherwise look at libraries like jQuery which give you a nice api to access DOM elements.
The error is what it says. You don't have a form variable defined (From what you've shared).
Also, it looks like you're trying to validate your form by accessing the values of the input fields. Here is how you should / could do it -
function validate(contact){
var name = document.getElementsByName('name')[0].value;
// You can also do the following
// var name = document.getElementById('name').value;
// var name = document.forms['contact'].elements['name'].value;
var email = document.getElementsByName('email')[0].value;
var message = document.getElementsByName('message')[0].value;
if (name.length == 0 || name.length > 200)
{
alert ("You must enter a name.");
return false;
}
if (email.length == 0 || email.length > 200)
{
alert ("You must enter a email.");
return false;
}
if (message.length == 0)
{
alert ("You must enter a message.");
return false;
}
return true;
}