Develop Reference

Why is my form not returning an alert when password does not match the confirm password field Javascript?

So I'm new to JS, and I'm trying to make this form prevent submission if password does not match the confirm password field. However, when I enter in 2 different passwords, I don't get an alert like I've coded in the script below. Any thoughts? For reference, the form was built w/ bootstrap.
<form class="form-signin">
<div class="form-label-group">
<input type="text" id="fullName" class="form-control" placeholder="Username" required autofocus>
<label for="fullName">Full name</label>
</div>
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
<label for="inputEmail">Work email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required>
<label for="inputConfirmPassword">Confirm password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" id ="register-btn" type="submit">Register</button>
<hr class="my-4">
<div class="registration-login">
<p class="already-have__account">Already have an account?</p> Login
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="registration__section">
<h2>Innovative supply chain teams use Rumi to manage scalable and sustainable packaging.
</h2>
</div>
<script>
var form = document.getElementById('form-signin');
form.onsubmit = function() {
if (inputPassword.value !== inputConfirmPassword.value) {
alert("Your passwords don't match");
return false;
}
else {
return true;
}
}

Just a minor mistake.
You are using get getElementById.
var form = document.getElementById('form-signin');
There is no id with 'form-signin',
<form class="form-signin">
Rename the class to id.
<form id="form-signin">
Check out this (JSFiddle). It's working here.

Array.prototype.filter() returns empty list

I'm trying to filter a list of jQuery elements collected using the .siblings() method.
I have the html code:
<div>
<div>
<label for="username">Username</label>
<input class="form-control username" type="text" placeholder="Username" id="username"/>
</div>
<div>
<label for="Password">Password</label>
<input class="form-control password" type="password" placeholder="Password" id="password"/>
</div>
<div style="text-align:center;">
<button id="login">Login</button>
</div>
</div>
When the button is pressed, I collect the sibling divs using:
var elem = jQuery(this).parent('div').siblings('div:has(input)');
This returns an array of length 2 (containing the divs of both the username and password).
When I then check to see if the first item in this array has a child input tag with class 'username' the following code returns true.
jQuery(elem[0]).children('input').hasClass('username');
However, when I filter the array on this condition, an array of length 0 is returned. Why does this happen? Surely the array should contain 1 element since the condition evaluates to true on the first element?
var filteredElem = elem.filter(div => jQuery(div).children('input').hasClass('username'));
$('#login').click(function() {
var elem = jQuery(this).parent('div').siblings('div:has(input)');
var filteredElem = elem.filter(div => jQuery(div).children('input').hasClass('username'));
console.log(filteredElem.length)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<label for="username">Username</label>
<input class="form-control username" type="text" placeholder="Username" id="username" />
</div>
<div>
<label for="Password">Password</label>
<input class="form-control password" type="password" placeholder="Password" id="password" />
</div>
<div style="text-align:center;">
<button id="login">Login</button>
</div>
</div>

Firstly note that you're calling the jQuery filter() method, not the native array filter() method as your title implies. This is because elem holds a jQuery object, not an array.
The issue itself is because the first argument passed to the jQuery filter() handler function is the index of the current element, not a reference to the element itself. As such you need to change the logic to:
var filteredElem = elem.filter((i, div) => ...
$('#login').click(function() {
var elem = jQuery(this).parent('div').siblings('div:has(input)');
var filteredElem = elem.filter((i, div) => jQuery(div).children('input').hasClass('username'));
console.log(filteredElem.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<label for="username">Username</label>
<input class="form-control username" type="text" placeholder="Username" id="username" />
</div>
<div>
<label for="Password">Password</label>
<input class="form-control password" type="password" placeholder="Password" id="password" />
</div>
<div style="text-align:center;">
<button id="login">Login</button>
</div>
</div>
That being said, you can simplify this example to just use find() instead of explicitly looping through all the sibling divs:
$('#login').click(function() {
var $username = $(this).parent('div').siblings('div:has(input)').find('.username');
console.log($username.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<label for="username">Username</label>
<input class="form-control username" type="text" placeholder="Username" id="username" />
</div>
<div>
<label for="Password">Password</label>
<input class="form-control password" type="password" placeholder="Password" id="password" />
</div>
<div style="text-align:center;">
<button id="login">Login</button>
</div>
</div>
Even simpler still would be to use the submit event of your login form and then find() the .username within that:
$('#yourLoginForm').on('submit', function() {
var $username = $(this).find('.username');
});

Displaying Angular 4 email validation text in paragraph

Im using the Angular 4 built in email input validator. It works, but I can only see the information in the small popup. Is it possible to display it in paragraph, below the input?
My input code:
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" [(ngModel)]="eMail" email pattern="[a-zA-Z0-9.-_]{1,}#[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>
Thanks!

You can do this :
In your HTML :
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" formControlName="email" required>
<div [hidden]="!(myForm.controls.email?.dirty && myForm.controls.email?.invalid)">
<small class="form-text text-danger"
[hidden]="!myForm.controls.email?.errors?.required">This field is required</small>
<small class="form-text text-danger"
[hidden]="!myForm.controls.email?.errors?.pattern">Wrong format error message</small>
</div>
</div>
And in your app.component.ts file :
this.myForm = fb.group({
...
email: new FormControl('', Validators.pattern(Regex.EMAIL))
});
For your patterns :
export class Regex {
public static EMAIL = '^[a-z0-9]+(\\.[_a-z0-9]+)*#[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$';
...
}

Onsubmit not working

I have this form and I tried to make a "onsubmit" that when I click submit it checks if the "email" is = to "cemail" and if username was taken before or not i got this so far
<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
Javascript code:
<script>
function ValidationEvent() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var cemail = document.getElementById("cemail").value;
// Conditions
if (email.match != cemail.match) {
alert("Your email doesn't match!");
}
if(mysqli_num_rows($result) != 0)
{
alert("Username already taken!");
}
else {
alert("Thank you");
}
}
</script>
Am I approaching the function in the wrong way is there another easier way and is it okay i put an sql statement in my java script ?

First, don't use inline HTML event handling attributes (like "onsubmit") as they create "spaghetti code", anonymous global event handling wrapper functions and don't conform to the modern W3C DOM Event handling standard.
Second, your .php results have to be gotten from somewhere. You'll need to put a call into that file for its results before you can use them.
Next, you were using the .match() string method incorrectly to compare the emails against each other. All you really need to do is compare the values entered into the email fields (it's also a good idea to call .trim() on form values to strip out any leading or trailing spaces that might have been inadvertently added).
Once you restructure your code to use standards, the JavaScript will change as follows (FYI: This won't work in the Stack Overflow snippet environment because form submissions are blocked, so you can see a working version here):
// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you will need:
var frm = document.getElementById("frm");
// Don't set variables to the values of DOM elements,
// set them to the DOM elements themselves so you can
// go back and get whatever properties you like without
// having to scan the DOM for them again
var email = document.getElementById("email");
var username = document.getElementById("username");
var cemail = document.getElementById("cemail");
// Set up a submit event handler for the form
frm.addEventListener("submit", validationEvent);
// All DOM event handling funcitons receive an argument
// that references the event they are responding to.
// We need that reference if we want to cancel the event
function validationEvent(evt) {
// Conditions
if (email.value.trim() !== cemail.value.trim()) {
alert("Your email doesn't match!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
return;
}
// You need to have already gotten the "mysqli_num_rows($result)" value
// from your .php file and saved it to a variable that you can then check
// here against "!=0"
if(mysqli_num_rows($result) != 0) {
alert("Username already taken!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
} else {
alert("Thank you");
}
}
});
<form class="form-horizontal" id="frm" action="#" method="post">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>

For checking the emails with email & cemail use
email.localeCompare(cemail)
This will check the string comparison betwwen two emails
And for mysqli_num_rows , is not defined any where in javascript, so we will get the undefined error in console, so need to write a different funnction with that name.

First give a name and an action to your form
<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
....
</form>
Then put this script at the bottom
<script>
$('#myForm').on("sumbit", function(){
// cancel the original sending
event.preventDefault();
$.ajax({
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
})
.done: function(data) // is called wehn the call was okay
{
if( data.substr(0, 5) == "Error"){
alert(data); // sent the sting of the "error message" begining with "Error"
}else{
top.location.href = data; // sent the sting of the "success page" when all was okay and data are saved in the database
}
}
.fail(function() {
alert( "Error: Getting data from Server" );
})
});
</script>
in the php file check the values an return an error if something went wrong.
<?php
if(!isset($_POST['email']) || !isset($_POST['cemail'])){
die("Error: Please fill out both email fields.");
if($_POST['email'] != $_POST['cemail'] ){
die("Error: The Email adresses do not match.");
}
here do what you want to do with the data.
when finish just send the new url
echo "success.html";
}
?>

JQuery code I wrote stopped working, is there anywrong I've overlooked?

For the below code I want the content of the submit button with the .btn-primary attribute to change to "Success!" only if the input fields are all not null.
At preset the code goes straight to success when the button is press whether or not the fields have content.
I thought it might be because the fields may somehow already have a value that is not null so I ran this code: alert($('#Comment').attr("value")); and it returned undefined in the alert message. Undefined is the same as null in js/jquery isn't it?
I got this code to work earlier and it was typed almost the same way with just a few changes. I undid the changes but it still does not work.
Any help will be appreciated. (If anyone knows this) Are there instances in which the same code could not work at a different time, all things being equal?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
$(document).ready(function () {
var Fname = $('#FirstName').attr("value");
var Lname = $('#LastName').attr("value");
var Email = $('#Email').attr("value");
var Comment = $('#Comment').attr("value");
$(".btn-primary").click(function () //This block should say, if all fields are not null changed the content of button to "Success!" and change the content of <h1> to "THANKS, I'VE GOT YOUR MESSAGE."
{
if (Fname != null && Lname != null && Email != null && Comment != null)
{
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
</script>
And this is the html on the same page
<form class="form-horizontal" role="form" action="/Home/Contact" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName"/>
<span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com"/>
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>

When your document loads you are storing the value of Fname, Lname ..... so on. The issue is you then use these values in your conditional test but the values will not have changed as they are just the raw value from the first time the page loaded. One quick fix would be to bring these inside the click so on every click they can re evaluated
Also when checking you are only checking for null but these are not going to equal null anyway. Better would be to fully validate them or just test for generic truthy which excludes the falsy values such as null, undefined, empty string
$(document).ready(function () {
$(".btn-primary").click(function (e)
{
var Fname = $('#FirstName').val();
var Lname = $('#LastName').val();
var Email = $('#Email').val();
var Comment = $('#Comment').val();
//ADDED JUST TO STOP THE FORM SUBMITTING
e.preventDefault();
//very quick test but this could be a lot more detailed for true validation on each field
if (Fname && Lname && Email && Comment) {
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
<form class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName" />
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>