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

Validate form's textarea - jQuery

I am trying to develope a plugin for an application that let the users invite their friends to use the application by just sending an email. Juts like Dropbox does to let the users invite friends and receive extra space.
I am trying to validate the only field I have in the form (textarea) with JQuery (I am new to JQuery) before submiting it and be handled by php.
This textarea will contain email addresses, separated by commas if more than one. Not even sure if textarea is the best to use for what I am trying to accomplish. Anyway here is my form code:
<form id="colleagues" action="email-sent.php" method="POST">
<input type="hidden" name="user" value="user" />
<textarea id="emails" name="emails" value="emails" placeholder="Example: john#mail.com, thiffany#mail.com, scott#mail.com..."></textarea>
</br><span class="error_message"></span>
<!-- Submit Button -->
<div id="collegues_submit">
<button type="submit">Submit</button>
</div>
</form>
Here is what I tried in Jquery with no success:
//handle error
$(function() {
$("#error_message").hide();
var error_emails = false;
$("#emails").focusout(function() {
check_email();
});
function check_email() {
if(your_string.indexOf('#') != -1) {
$("#error_message").hide();
} else {
$("#error_message").html("Invalid email form.Example:john#mail.com, thiffany#mail.com, scott#mail.com...");
$("#error_message").show();
error_emails = true;
}
}
$("#colleagues").submit(function() {
error_message = false;
check_email();
if(error_message == false) {
return true;
} else {
return false;
}
});
I hope the question was clear enough, if you need more info please let me know.
Many thanks in advance for all your help and advises.

var array = str.split(/,\s*/);
array.every(function(){
if(!validateEmail(curr)){
// email is not valid!
return false;
}
})
// Code from the famous Email validation
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);
}

Few errors as I noted down:
The code snippet posted here has missing braces }); at the end.
Also, what is your_string variable in the function check_email.
Also, error_message is assigned false always so the submit method will return true always.
Fixing this issues should help you.

I would use, as I commented above, append() or prepend() and just add fields. As mentioned in another post, client side use jQuery validation, but you should for sure validate server-side using a loop and filter_var($email, FILTER_VALIDATE_EMAIL). Here is a really basic example of the prepend():
<form id="colleagues" action="" method="POST">
<input type="hidden" name="user" value="user" />
<input name="emails[]" id="starter" placeholder="Email address" />
<div id="addEmail">+</div>
</br><span class="error_message"></span>
<!-- Submit Button -->
<div id="collegues_submit">
<button type="submit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$("#addEmail").click(function() {
$("#colleagues").prepend('<input name="emails[]" placeholder="Email address" />');
});
});
</script>

Hi please use below js code,
$('#emails').focusout(function(e) {
var email_list = $('#emails').val();
var email_list_array = new Array();
email_list_array = email_list.split(",");
var invalid_email_list=' ';
$.each(email_list_array, function( index, value ) {
if(!validEmail(value))
{
invalid_email_list=invalid_email_list+' '+value+',';
}
});
console.log(invalid_email_list+' is not correct format.');
alert(invalid_email_list+' is not correct format.');
})
function validEmail(v) {
var r = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
return (v.match(r) == null) ? false : true;
}
If you need to check more REGEX just do it validEmail() function. I hope this will help to sort out.
thank you

Your code might look correct, but you are using bad technique. My advice is to use jquery validation plugin that would handle textarea validation.for you. Also notice. There might be many solutions for this problem, but you should stick with simple one. And the first problem i see stright away is: button tag doesnt have type attribute. You are changing #error_message html, not text. Etc...

Javascript code not working unless there are no spaces. Why?

Ok so I am running into a really weird bug on my Wordpress site that hope is just my ignorance because this just seems too weird.
So I am working with styling a couple of input tags as well as a ReCaptcha form. I found some documentation at https://developers.google.com/recaptcha/old/docs/customization that I have been following. Basically what I want is the clean theme listed at that link and to do some showing/hiding of the captcha based on certain events.
I do realize that the top of the article mentions this version of the api is old, but the plugin I am using has some recaptcha code entangled in their code, so I figured I would try this first instead of making major modifications to the plugin.
So here is the code I am using
<!-- Code added by me-->
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
function toggleCaptcha(inputField)
{
alert('working');
}
</script>
<!-- End code added by me -->
<script>
function validateGoodNewsUser(frm, requireName) {
requireName = requireName || false;
if(requireName && frm.goodnews_name.value=="") {
alert("Please provide name");
frm.goodnews_name.focus();
return false;
}
if(frm.email.value=="" || frm.email.value.indexOf("#")<1 || frm.email.value.indexOf(".")<1) {
alert("Please provide a valid email address");
frm.email.focus();
return false;
}
// check custom fields
var req_cnt = frm.elements["required_fields[]"].length; // there's always at least 1
if(req_cnt > 1) {
for(i = 0; i<req_cnt; i++) {
var fieldName = frm.elements["required_fields[]"][i].value;
if(fieldName !='') {
var isFilled = false;
// ignore radios
if(frm.elements[fieldName].type == 'radio') continue;
// checkbox
if(frm.elements[fieldName].type == 'checkbox' && !frm.elements[fieldName].checked) {
alert("This field is required");
frm.elements[fieldName].focus();
return false;
}
// all other fields
if(frm.elements[fieldName].value=="") {
alert("This field is required");
frm.elements[fieldName].focus();
return false;
}
}
}
}
return true;
}
</script>
<form method="post" class="goodnews-front-form" onsubmit="return validateGoodNewsUser(this,false);">
<div><label>Your Name:</label> <input type="text" name="goodnews_name"></div>
<div><label>*Your Email:</label> <input type="text" name="email" onfocus="toggleCaptcha(this)"></div>
<p><script type="text/javascript" src="<!--Captcha api url here-->"></script>
<noscript>
<iframe src="<!--Captcha api url here-->" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript></p>
<div><br>
<input type="submit" value="Subscribe">
</div>
<input type="hidden" name="goodnews_subscribe" value="1">
<input type="hidden" name="list_id" value="1">
<input type="hidden" name="required_fields[]" value="">
</form>
So the problem I am running into is when I load the page, I see the clean theme for ReCaptcha and the alert shows up when I click inside the input box for the email. But if I change my added code by adding a single space like this
<!-- Code added by me-->
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
<<<<<<<< Single new line space added.
function toggleCaptcha(inputField)
{
alert('working');
}
</script>
The whole thing breaks and the page loads with the standard red ReCaptcha and my functions don't get called.
I don't mind not using spaces, but that seems very odd that a space would make the difference. Am I missing something here? Is this caused by the outdated api?
Edit:
I was asked to try to get a jsfiddle working (or not working???). I stripped out everything except the form and the function call. Even the ReCaptcha was taken out and I still can not get it to call the function. This may be my lack of knowledge on jsfiddle or it may get closer to the real problem. https://jsfiddle.net/b257779t/

returning false not stopping the submission of form

My purpose: If the user field and password field are blank, I want to stop form submitting.
This is my Code that I am trying:
<!DOCTYPE html>
<html>
<head>
<script>
function doit() {
var usr = document.getElementById('ur').value;
var psw = document.getElementById('pw').value;
if ((usr.trim() == '') && (psw.trim() == '')) {
alert("cannot Submit form");
return false;
}
}
</script>
</head>
<body>
<form action="post.php" method="post" onsubmit="doit()">
User:
<input type="text" id="ur" name="user">
<br>
<br> Pass:
<input type="password" id="pw" name="pass">
<br>
<br>
<button>Submit</button>
</form>
</body>
</html>
I am learning JavaScript. Will be helpful if you correct the code with a little explanation why it is not working.

return false is working fine, the way you are calling that function is wrong.
<form action="post.php" method="post" onsubmit="doit()">
Just calls it, doesn't do anything with the return value
<form action="post.php" method="post" onsubmit="return doit()">
^
Will stop the form post on a false returned value.
Read this note on MSDN although it is not IE specific
You can override this event by returning false in the event handler. Use this capability to validate data on the client side to prevent invalid data from being submitted to the server. If the event handler is called by the onsubmit attribute of the form object, the code must explicitly request the return value using the return function, and the event handler must provide an explicit return value for each possible code path in the event handler function.
Now onto another important point.
Your if condition will only stop form submission when both the fields are blank, whereas it should do that even if any one of those two fields is blank. That && (AND) should be an || (OR), and at the end of your functions if nothing returned false, return true then.

onsubmit event accepts boolean values, since you are not returning anything so it assumes true by default. You need to add return in this event explicitly like mentioned below:
change
onsubmit="doit()">
to
onsubmit="return doit()">

Using addEventListener on submit with preventDefault()
document.form1.addEventListener( "submit", function(event) {
var user = this.querySelector("input[name=user]").value; // this = object of form1
var pass = this.querySelector("input[name=pass]").value;
if ( (user.trim() == "") || (pass.trim() == "") ) {
alert("cannot Submit form");
event.preventDefault();
} else {
alert("submit");
}
} );
<form action="" method="post" name="form1" >
Username: <input type="text" name="user" /><br><br>
Password: <input type="password" name="pass" /><br><hr>
<input type="submit" value="Submit" />
</form>
codepen
repl.it

If user enters specific text into form, take them to certain page on submit

I have a website where the user can learn about web or game design, and there's a form on the index asking which they prefer to learn. The only part of my script that's working is that is alerts them they didn't choose if they left the form blank and submitted. Here's the code:
JS:
function validateForm() {
var x=document.forms["form1"]["lesson"].value;
if (x === "web design") {
location.href="web.html";
} else if(x === "game design") {
location.href="game.html";
} else {
alert("You didn't choose. You will remain on the home page.");
}
}
HTML:
<form name="form1" onsubmit="return validateForm()" method="post">
Would you rather learn web design <i>or</i> game design?: <input type="text" name="lesson">
<input type="submit" value="Submit">
</form>

[If I understand your problem correct:] You should refer to form[0] and also set the <form>'s action-property instead of changing the location. If not, why bother using a form anyway? I would do the following imho more flexible approach instead :
function validateForm() {
var val=document.forms[0]['lesson'].value;
switch (val) {
case 'web design' :
document.forms[0].action="web.html";
break;
case 'game design' :
document.forms[0].action="game.html";
break;
default :
alert("You didn't choose. You will remain on the home page.");
return false;
break;
}
}
and change the markup to
<input type="submit" value="Submit" onclick="validateForm();">

I'd rather suggest you to move on to jQuery. It is easy to use and reduces the code typing fatigue. So, if you'd use jQuery, your form would look like:
<form id="form1" method="post">
Would you rather learn web design <i>or</i> game design?: <input type="text" id="lesson">
<input type="submit" value="Submit">
</form>
and your jQuery would be like:
$(function()
{
$('#form1').on('submit',function()
{
if($('#lesson').trim().val()=="web design")
location.href="web.html";
if($('#lesson').trim().val()=="game design")
location.href="game .html";
else
{
alert("You didn't choose. You will remain on the home page.");
return false;
}
});
});
and do not forget to include the jquery script file in head part of your html document. Go here for the download link.

Try like this
<form name="form1" onsubmit="return validateForm()" method="post">
Would you rather learn web design <i>or</i> game design?:<input type="text" name="lesson" id="lesson">
<input type="submit" value="Submit">
</form>
JS
function validateForm() {
var x = document.getElementById('lesson').value;
if (x === "web design") {
location.href = "web.html";
}
else if (x === "game design") {
location.href = "game.html";
}
else {
alert("You didn't choose. You will remain on the home page.");
}}