Develop Reference

JavaScript Login Form Not Validating

Good Evening,
I am trying to create a simple JavaScript login form that will validate by checking only 1 specific email address which has been declared and 1 password that has been declared.
However, no matter what is typed into the fields, even if nothing is present, once the submit button is clicked, the user is directed to the desired page.
I need it to only allow the desired page if the email address and password are the correct. Otherwise, notify them that it is incorrect.
Here is a link to [codepen][1] so you can see the page and script.
https://codepen.io/m0rrisim0/pen/bmzyqj
Any help is appreciated in figuring out why the script is not validating.

You have to use the attribute value from document.getElementById method,
like the following example: document.getElementById("UserName").value
function validate() {
'use strict';
var UserName = document.getElementById('UserName').value;
var email = "adrian#tissue.com";
var Password = document.getElementById('Password').value;
var pass = "welcome1";
if ((UserName == email) && (Password == pass)) {
return true;
} else {
alert("UserName and/or Password Do Not Match");
return false;
}
}
Your form's inputs lack the id atrribute and should return the function on submit event.
<form action="Issues.html" method="post" id="loginform" onsubmit="return validate()">
UserName:
<input type="text" name="UserName" id="UserName">
<br>
<br>
Password:
<input type="password" name="Password" id="Password">
<hr>
<input type="submit" value="Submit">
</form>

Your problem was getElementById(), this function requires a argument and cause a error. Because of this error the line loginform.onsubmit = validate; was never reached so the submit button submit the form without calling a validate function.
There is no need to put this line inside the if statement, but if you want you can change a little bit to getElementById without the parentesis, this way it evaluates to a function that in js is truthy.
You can check a working version of you code here:
if (document && document.getElementById) {
var loginform = document.getElementById('loginform');
loginform.onsubmit = validate;
}
https://codepen.io/francispires/pen/mzvYKX
You can improve this validation

Javascript email validation failing on a valid email address?

I seem to be unable to get a basic javascript email validation function to work correctly. It keeps returning that the email address is invalid even when using a real email address.
Could someone please point me in the right direction as i couldn't find the problem on any other similar SO posts. I don't think it's the function itself, but perhaps how i am calling it? I have posted the code below.
// E-mail validation via regular expression - taken from SO solution
// Needs to be accessible for other Forms to use
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
// Validate Contact Form
function validate_contact(evt) {
var error = '';
// Set Veriables
var email = document.getElementById("contact_email");
// Validate Other Fields Here
// - Removed for Example -
// Validate Email Address
if (!isValidEmailAddress(email)) {
error += '- Please enter a valid Email Address.\n';
}
// Show Error Notice
if (error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error);
evt.preventDefault(); // Stop the event
} else {
// Proceed
}
}
// Get reference DOM elements
var contact_form = document.getElementById("contact_form");
// Set up event - Contact Form Validation
contact_form.addEventListener("submit", validate_contact);
// Set up event - Other Form Validation
//other_form.addEventListener("submit", validate_other);
<form id="contact_form" method="post" action="" autocomplete="off">
<input type="text" id="contact_email" name="email" value="">
<input type="submit" id="submit">
</form>

You should do some basic debugging. Look at the contents of the variables you are testing.
var email = document.getElementById("contact_email");
The value of email is the input element, not the text entered into it. For that you need to read its .value property.
Solution is to add ".value"
var email = document.getElementById("contact_email").value;

Refresh jquery form after submission not working

For one of my websites, I am designing a HTML form with jquery and PHP for sending the data through email.
The Jquery, checks for the empty /blank fields and sends alerts for each filed.
Once the form is submitted with full data, it sends success alert and send the input data through PHP.
Till this point the code works fine.
Once the data is submitted & success alert is shown, I want the html form to be refreshed / reloaded.
But this this not happening, as the form remains with the pre-entered data.
Kindly help me in this please. My Jquery & HTML form is given below.
JQUERY-CODE (with google libs 2.2)
JQUERY CODE
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '') {
alert(" Please fill your name");
} else if (email == '') {
alert("Please fill your email");
} else if (message == '') {
alert("Please Fill message");
} else { alert("Your form submitted. We will contact you soon.");
$.post("xxx.php", { // To php file.
name: name,
email: email,
message: message
}, function(data) {
$("#returnmessage").append(data);
if (data == "Your form submitted. We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
HTML FORM CODE:
<form id="form" method="post" action=" ">
<h4>FEED-BACK FORM</h4>
<p id="returnmessage"></p>
<label>Name: </label>
<input type="text" id="name" /><br>
<label>Email: </label>
<input type="text" id="email" /><br>
<label>Message: </label>
<input type="text" id="message" /><br>
<input type="button" id="submit" value="Submit"/>
</form>

check below js
if (data == "Your form submitted. We will contact you soon.") {
document.getElementById('form').reset(); // To reset form fields on success.
}
Or
if (data == "Your form submitted. We will contact you soon.") {
$('#form').find("input[type=text]").val(""); // To reset form fields on success.
}

you can clear the input fields by setting its value to ""
$("#name").val("");
$("#email").val("");
$("#message").val("");

The problem is most likely with your if statement. The line $("#form")[0].reset(); is correct, move it above the if statement to see it working.

getting a message to be displayed on javascript method

firstly i will show some code.
html:
<label>Password </label> <input type="password" id="pword"><br>
<label>Confirm Password </label> <input type="password" id="confpword" onkeyup="passwordValidation(); return false;">
<span id="themessage" class="themessage"></span><br>
js:
function passwordValidation(){
var username = document.getElementById("uname");
var password1 = document.getElementById("pword");
var confpword1 = document.getElementById("confpword");
var themsg = document.getElementById("themessage");
var gc = "#ff6666";
if (password1.value == confpword1.value){
themsg.style.color = gc;
themsg.innerHTML = "Passwords match";
}else{
themsg.style.color = gc;
themsg.innerHTML = "Passwords do not match";
}
}
i cant work out why nothing will show up after i start typing stuff into the input boxes. after i have 'keyed up' once typing into the confirm password box surely 1 of the 2 messages should display.
i cant work out why the text is not visible.
js fiddle to show problem with current code.
people can edit that if it helps
thanks
https://jsfiddle.net/z5xj4hrt/

Your code works, your JSFiddle setup is just wrong.
You need to put the JavaScript code execution option as "No wrap - In head" or "No wrap - In body" if you want to call functions like that one.
OnDomReady will not keep the function.
See the corrected JSFiddle

javascript email validation without submitting

I want to validate this email :
<div>
<div>
<div >
<big><p>please enter an email address IF you wish to
recieve a link to your results.<p>
E-mail Address:</big> <input name="recipient"class="upload" type="text"
/>
<div id="correct">
✔
</div>
<div id="incorrect">
✘
</div>
</div>
</div>
I want to check if the email input is valid, if its is valid show the "correct" div , if not show the "incorrect" div, i want to do this without submitting the form.
cant anyone help ? thanks

Here is a function which uses Regex to match value.
<script language="javascript">
function checkEmail() {
var email = document.getElementById('recipient');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
document.getElementById('incorrect').style.visibility="visible";
document.getElementById('correct').style.visibility="hidden";
}
else
{
document.getElementById('correct').style.visibility="visible";
document.getElementById('incorrect').style.visibility="hidden";
}
}
</script>

Several alternatives/plugins/solutions for client side validation based on several JS frameworks are available. I am citing but one example that utilizes jQuery: http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

From this answer
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\ ".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}