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

Jquery Validation validate form-array with index [duplicate]

This question already has answers here:
Validating array inputs using jquery validation plugin
(4 answers)
Closed 8 years ago.
I need to validate the floor fields that mention below.
<form id="test_form" >
<input name="floor[abc]" type="text" class="input_txt_l " value="" />
<input name="floor[cde]" type="text" class="input_txt_l " value="" />
</form>
I tried with jquery validator plug-in.
jQuery("#test_form").validate({
rules: {
'floor[]':{
required:true
}},
messages: {
'floor[]':{
required:"floor is required."
}
}
});
In here validation is not working. but if the floor has no index , It works well. If someone have idea to fix this issue please help me.

There are different ways to solve your problem:
Either you use addClassRules:
// using the class name instead of field name
jQuery.validator.addClassRules("input_txt_l", {
required: true
});
Or you handle each field separately, because in fact they are named different:
jQuery("#test_form").validate({
rules: {
'floor[abc]':{
required:true
},
'floor[cde]':{
required:true
},
}
});
Or you rename your fields:
HTML:
<input name="floor[][abc]" type="text" class="input_txt_l " value="" />
<input name="floor[][cde]" type="text" class="input_txt_l " value="" />
JavaScript:
jQuery("#test_form").validate({
rules: {
'floor[]':{
required:true
}},
});
fiddle is here.

Not allow a blank character / space in a input form [duplicate]

This question already has answers here:
How to prevent invalid characters from being typed into input fields
(8 answers)
Closed 9 years ago.
Is it possible to not allow a blank character / space in a input form like below?
<input type="text" value="" maxlength="30" name="email" class="formfield w0">

Check this Fiddle. Relevant code:
$(function() {
$('#input1').on('keypress', function(e) {
if (e.which == 32){
console.log('Space Detected');
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1" />

Use HTML5's extended input types to apply constraint validation, which will prevent submitting the form with invalid emails in modern browsers:
<input type="email" value="" maxlength="30" name="email" class="formfield w0">
In older browsers, you can detect that the input's type is not "email", as it will default to "text" when a value is considered invalid. I'd recommend blocking the submission of the form, rather than preventing default action of the space key, which could be inadvertently circumvented by pasting or via other input methods.
The following code is an example of this, and should be executed after the document is ready:
var frm = document.getElementById('myform');
if (frm.email.type === 'text') {
frm.onsubmit = function () {
if (/\s/.test(frm.email.value)) {
// Tell your user the field is invalid here, e.g.
frm.email.className = 'invalid';
// Prevent form submission
return false;
}
}
}
Working demo: http://jsfiddle.net/hgc7C/
Don't forget that this is not a substitute for server-side form validation.

Yes it is possible by using javascript/JQuery.
If you want it for all text boxes, then do as below.
$(function() {
$('.formfield input[type=text]').on('keypress', function(e) {
if (e.which == 32)
return false;
});
});
If you want it for a specific textbox, then add an id to the textbox input and replace .formfield input[type=text] with #textBoxId

Validate HTML form input with JavaScript [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Validate email address in Javascript?
I have an HTML form that uses PHP/MySQL to post to a database. In the email section of the form, I want the user to be displayed an error message if he or she types in an email address that is not in valid email address format. I am modeling off of a code like this, but I cannot get it work.
Note that whenever I hit the submit button on the form, the form submits, and the PHP action works fine. The problem is I can enter anything I like in the form and it will pass fine. I would like for it to display the error message "Not a valid email address". I understand I can validate via PHP too, but I would like to validate on the client side as well.
Can anyone assist?
<script type="text/javascript">
function validateEmail()
{
var x=document.forms["test"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>
<form name"test" action="roads.php" onsubmit="return validateEmail();" method="post">
<input type="text" name="email" placeholder="Enter your e-mail" />
<input type="submit" value="Show Me!" />
</form>

you are missing a = in html, which doesn't make to form name test..and javascript can't find the form of name test, and throws error...check console log for javascript errors..
<form name"test" action="roads.php" onsubmit="return validateEmail();" method="post">
<form name="test" action="roads.php" onsubmit="return validateEmail();" method="post">
Working code

Here is a better way to access the form and its fields - also remember to return true
Assuming <form id="testform" action="roads.php" method="post">
we can use unobtrusive scripting
<script>
window.onload=function() {
document.getElementById("testform").onsubmit=function () {
var email=this.email.value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
return true;
}
}
</script>

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);
}