We Keep Coding

Disable submit button when password not match and enable when matched in bootstrap modal

I have a bootstrap modal form for sign up. I want my submit button to be disabled before my password and re-type password are matched. Matched meaning it has to be some input and not empty.
The button should be enabled when matched and disabled again when both fields unmatched again.
I have tried almost all solutions on google and am still stuck for two days.
Here is my form HTML:
<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>
<div class="form-group">
<button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button>
</div>
Here is my script:
if (document.getElementById('signupModalPassword').value ==
document.getElementById('signupModalPwCheck').value) {
document.getElementById('signupbtn').disabled = false;
} else {
document.getElementById('signupbtn').disabled = true;
}
if(document.getElementById('signupModalPassword').value == 0) {
document.getElementById('signupbtn').disabled = true;
} else {
document.getElementById("signupbtn").disabled = false;
}
Please forgive my messy code as I'm very new to coding.
I'll be so grateful if you could help.

example of code:
// validate on first render
check();
function check() {
const signupModalPassword = document.getElementById('signupModalPassword');
const signupModalPwCheck = document.getElementById('signupModalPwCheck');
if (signupModalPassword.value && signupModalPwCheck.value
&& signupModalPassword.value === signupModalPwCheck.value) {
document.getElementById('signupbtn').disabled = false;
}
else {
document.getElementById('signupbtn').disabled = true;
}
}
<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>
<div class="form-group">
<button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button>
</div>

Use 2 or more url for a single HTML Page

I've an important question regarding Node Express. I've a single html page which has been divided into three div with ids (login-form, signup-form and forgot-password). Now, I want that I use different url for every div. How can I do that in node express?
let forgot_password_enable = document.querySelector('#forgot')
let signup_form_enable = document.querySelector("#signup")
let login_form_enable1 = document.querySelector("#login-enable")
let login_form_enable2 = document.querySelector("#go-login")
let forgot_password_form = document.querySelector("#forgot-password")
let login_form = document.querySelector("#login-form")
let signup_form = document.querySelector("#signup-form")
//Enable forgot password form using "Forgotton Password?".
forgot_password_enable.addEventListener('click', () => {
if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
forgot_password_form.style.display = 'none'
signup_form.style.display = 'none'
}
if (forgot_password_form.style.display == 'none' &&
signup_form.style.display == 'none' && login_form.style.display != 'none') {
forgot_password_form.style.display = 'block'
login_form.style.display = 'none'
}
})
//Enable Sign-up Form using "Didn't have an account?"
signup_form_enable.addEventListener('click', () => {
if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
forgot_password_form.style.display = 'none'
signup_form.style.display = 'none'
}
if (forgot_password_form.style.display == 'none' && signup_form.style.display == 'none' && login_form.style.display != 'none') {
login_form.style.display = 'none';
signup_form.style.display = 'block'
}
})
//Enable Login Form using "Already have an account?"
login_form_enable1.addEventListener('click', () => {
if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
forgot_password_form.style.display = 'none'
login_form.style.display = 'none'
}
if (forgot_password_form.style.display == 'none' && login_form.style.display == 'none' && signup_form.style.display != 'none') {
signup_form.style.display = 'none'
login_form.style.display = 'block'
}
})
//Enable Login Form using "Back to Login Page."
login_form_enable2.addEventListener('click', () => {
if (forgot_password_form.style.display != 'none' && signup_form.style.display != 'none' && login_form.style.display != 'none') {
login_form.style.display = 'none'
signup_form.style.display = 'none'
}
if (forgot_password_form.style.display != 'none' && login_form.style.display == 'none' && signup_form.style.display == 'none') {
forgot_password_form.style.display = 'none'
login_form.style.display = 'block'
}
})
let email = document.getElementById('email')
email.addEventListener('input', () => {
emailRegex = /^(([^<>()\[\]\\.,;:\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 emailRegex.test(val);
}, 'Invalid e-mail.');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../CSS/login-signup3.css">
<title>Login/Register</title>
</head>
<body>
<h3 id="home">Back to Home</h3>
<div class="form-container">
<!-- To enable the Forgot Password form.
Forgot Password<input type="checkbox" name="forgot_password" id="enable_password">
To enable Login form from Sign-up form.
Login Form<input type="checkbox" name="login" id="login-enable">
To enable Sign-up form from Log-in form
Signup Form<input type="checkbox" name="signup" id="signup-enable">
To enable Login-form when "signup-enable" input box is checked by clicking on the "Already have an account?"
Login Form<input type="checkbox" name="login" id="login-enable2"> -->
<div id="login-form">
<form action="#" id="login">
<!--Username or Email Input.-->
<div class="usermail">
<label for="useremail"><img src="../logos and images/username.png" alt="Image not found!"></label>
<input type="email" name="Email" id="useremail" placeholder="Username or Email" required><b style="color: red;">*</b>
</div><br>
<!--Password Input.-->
<div class="password">
<label for="password"><img src="../logos and images/password.png" alt="Image not found!"></label>
<input type="password" name="Password" id="password" required placeholder="Password"><b style="color: red;">*</b>
</div><br>
<!--Login and Clear Button, Forgotton Password and Signup-form enable-->
<div class="log-frgt">
<input type="submit" value="Log in" id="signin">
<input type="reset" value="Clear" id="reset">
<span id="forgot" style="color: royalblue;cursor: default">Forgotton Password?</span>
</div><br>
<span id="signup" style="color: royalblue;cursor: default">Didn't have an account?</span>
</form>
</div>
<!--Sign-up Form-->
<div id="signup-form">
<form action="" method="POST">
<!--Name input box.-->
<div class="name">
<h4>Name</h4>
<div class="firstlastname">
<label for="first-name" style="font-weight: bolder;">First Name</label>
<input type="text" name="firstname" id="first-name" placeholder="First Name" required><b style="color: red;">*</b>
<br><label for="last-name" style="font-weight: bolder;">Last Name</label>
<input type="text" name="lastname" id="last-name" placeholder="Last Name (Optional)">
</div>
</div><br>
<!--Father Name Input Box.-->
<div class="father-name">
<label for="father-name" style="font-weight: bolder;">Father Name</label>
<input type="text" name="father-name" id="father-name"><b style="color: red;">*</b>
</div>
<!--Gender Input-->
<div class="gender">
<h4>Gender</h4>
<!--Male-->
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="Male">
<!--Female-->
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="Female">
<!--Third Gender-->
<label for="other-gender">Other</label>
<input type="radio" name="gender" id="other" value="Other">
</div>
<!--Username Input.-->
<div class="username">
<label for="username"><img src="./logos and images/username.png" alt="Image not found!"></label>
<input type="text" name="Username" id="username" placeholder="Choose your Username" required><strong style="color: red;">*</strong>
</div><br>
<!--Email Input.-->
<div class="email">
<label for="email"><img src="./logos and images/username.png" alt="Image not found!"></label>
<input type="email" name="Email" id="email" placeholder="Enter your Email" required><strong style="color: red;">*</strong>
</div><br>
<!--Password & Confirm Password Input Box.-->
<div class="password">
<!--Password-->
<label for="password"><img src="../logos and images/password.png" alt="Image not found!"></label>
<input type="password" name="password" placeholder="Create Password" required><b style="color: red;">*</b>
</div><br>
<!--Confirm Password.-->
<div class="cnfm-password">
<label for="cnfm-password"><img src="../logos and images/password.png" alt="Image not found!"></label>
<input type="password" name="cpassword" id="cnfm-password" placeholder="Confirm Password" required><b style="color: red;">*</b>
</div><br>
<!--Mobile Number Input-->
<div class="mobile">
<label for="mobile"><img src="../logos and images/mobile.png" alt=""></label>
<input type="number" name="Mobile_No." id="mobile" placeholder="Enter your Number"><strong style="color: red;">*</strong>
<input type="submit" value="Send">
</div><br>
<!--OTP Input.-->
<div class="otp">
<label for="otp" style="font-weight: bold;">OTP</label>
<input type="number" name="OTP" id="otp" placeholder="Enter your OTP" required><strong style="color: red;">*</strong>
<input type="submit" value="Verify" id="otp-verify">
</div><br>
<!--Sign-up, Clear Button and Log-in form show-->
<div class="btn-logshow">
<input type="submit" value="Register" id="register">
<input type="reset" value="Clear" id="clear">
<span id="login-enable" style="color: royalblue;cursor: default;">Already have an account?</span>
</div>
</form>
</div>
<div id="forgot-password">
<form action="#">
<!--Email Input.-->
<div class="email2">
<label for="email2"><img src="../logos and images/" alt="Image not found!"></label>
<input type="email" name="Email" id="email2" placeholder="Enter Email" style="font-weight: bolder;" required><strong style="color: red;">*</strong>
</div><br>
<!--Username Input.-->
<div class="username2">
<label for="username2"><img src="./logos and images/username.png" alt="Image not found!"></label>
<input type="text" name="Username" id="username2" placeholder="Enter Username (Optioal)">
</div><br>
<!--Mobile Number Input.-->
<div class="mobile2">
<label for="mobile2"><img src="../logos and images/" alt="Image not found!"></label>
<input type="number" name="Mobile_No." id="mobile2" placeholder="Enter your Number" required><strong style="color: red;">*</strong>
<input type="submit" value="Send" id="otp_send2">
</div><br>
<!--OTP Input.-->
<div class="otp2">
<label for="otp2" style="font-weight: bold;">OTP</label>
<input type="number" name="OTP" id="otp2" placeholder="Enter your OTP" required><strong style="color: red;">*</strong>
<input type="submit" value="Verify" id="otp-verify2">
</div><br>
<!--Password Change Button, Login-form enable and Signup-form enable.-->
<div>
<input type="submit" value="Submit" id="pwdchng">
<span id="go-login" style="color: royalblue;cursor: default">Back to Login Page.</span>
</div>
</form>
</div>
</div>
<script src="../JS/login-signupform.js"></script>
<script src="../Backend/login-signup.js"></script>
</body>
</body>
</html>

You would have to create a new route to handle each request. So in each of your divs, you would make an AJAX request to a distinct route.
div1 = post request to "/api/login"
div2 = post request to "/api/signup"
div3 = post request to "/api/forgotPassword"
And in your Express app, create each distinct route:
app.post("/api/login", (req, res) => {
//handle request, of course you should be using authentication middleware to secure this route
res.send(res)
})
app.post("/api/signup", (req, res) => {
res.send(res)
})
app.post("/api/forgotPassword", (req, res) => {
res.send(res)
})
Once your server sends the response to the client, make sure your client side code handles the response and redirects the user to a new route. Of course in this new route, you would have to create a new html page and express route that serves up the static html to them.
Just be sure you're authenticating the routes, and hashing db passwords. You should never store raw text data in your databases! You should be doing hash checks on the db password and user sent pass to verify it.

Enable submit button if atleast one field has filled value

Sorry this might be a duplicate Q , but could not find a direct solution easily,
I have gone through SO answer and found , enable submit if all values are filled ,
$(document).ready(function() {
$('.field input').keyup(function() {
var empty = false;
$('.field input').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.actions input').attr('disabled', 'disabled');
} else {
$('.actions input').attr('disabled', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
But how to achieve the same(enable submit) if atleast one field is non-empty

You can try this:
$(document).ready(function() {
$('.field input').keyup(function() {
var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length;
$('.actions input').attr('disabled', hasValue ? false : 'disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
Update:
$('#username,#password').filter((index, input) => input.value.length > 0).length
This line means we will check the value of the 2 input elements username and password, if all of them don't have any value, the button will be disabled. If you want to check another input element before enabling/disabling, you can add:
$('#username,#password,#input_3,#input_4').filter(...).length
By this way, the button will be disabled when username, password, input_3 and input_4 elements don't have any value. Make sure you have a specific id for each input element.
Update 2:
Checking for both username and password have some value:
var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length === 2
Checking for field, field4 and field5 have some value:
var hasValue = $('#field,#field4,#field5').filter((index, input) => input.value.length > 0).length === 3

Use jQuery props method.
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}else{
$(':input[type="submit"]').prop('disabled', true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>

Another way to go about it:
Store the fields, and create a new collection of them each time a key is pressed, filtering each one by its value.
If the length of our empty fields is the same as the length of all fields, disable the button:
$(document).ready(function() {
var $fields = $('.field input');
$fields.keyup(function() {
var $emptyFields = $fields.filter(function(){
return !this.value;
});
$('.actions input').prop('disabled', $emptyFields.length === $fields.length);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
Documentation:
.filter()
.prop()

You could with Jquery.map and Array.find
Jquery.map().get() is get all the input value length with condition.
Array.find will find the any one of the input as valid length of string
Then finally the result will be reversely compare prop('disabled', !filled)
$(document).ready(function() {
$('.field input').keyup(function() {
var res = $('.field input').map(function() {
return $(this).val().length != 0
}).get()
var filled = res.find(a=> a == true)
$('.actions input').prop('disabled', !filled);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
Updated with select option
Required field based .Button only enabled after required field 1 and 3 both are filled
$(document).ready(function() {
$('.field input,.field select').on('keyup change',function() {
var res = $('.field input[required],.field select[required]').map(function() {
return $(this).val().trim().length != 0
}).get();
var filled = res.every(a => a == true)
$('.actions input').prop('disabled', !filled);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<form>
<div class='field'>
<label for="username">Username *</label>
<input id="username" required type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='field'>
<label for="password">email *</label>
<input id="password" required type="password" />
</div>
<div class='field'>
<label for="password">select email *</label>
<select required>
<option value="">Select</option>
<option value="1">one</option>
<option value="2">two</option>
</select>
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>

You can try this in a simple way, as shown below:
var filled = false;
$('.field input').each(function() {
if ($(this).val().length > 0) {
filled = true;
return; // just add return means break from loop whenever any field is filled.
}
});
if (filled) {
$('.actions input').attr('disabled', false);
} else {
$('.actions input').attr('disabled', 'disabled');
}
});

form onSubmit doesn't call javascript function

I have checked recent blogs about onsubmit event not triggering the method. Those suggestions were not helpful for this problem.And i've tried this method and form in an another html page which didn't work either.So i am not able to find out where main problem is ?
My code :
<div id="_div2">
<center>
<div class="contianer">
<script type="text/javascript">
function formValidation ()
{
var fName =document.Log.firstName.value;
var lName =document.Log.lastName.value;
var pName =document.Log.penName.value;
var email =document.Log.email.value;
var password=document.Log.password.value;
var confirmPassword=document.Log.confirmPassword.value;
var status=false;
if(fName.length<1)
{
document.getElementById("firstNameLoc").innerHTML=
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status=false;
}
else
{
document.getElementById("firstNameLoc").innerHTML=
"<img src="Resource/checked.png"/>Please Enter your First Name";
status=true;
}
return status;
}
</script>
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class ="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>

you almost done. simple quotes problem.you could change like this in your dom else statement
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Please Enter your First Name';
function formValidation() {
var fName = document.Log.firstName.value;
var lName = document.Log.lastName.value;
var pName = document.Log.penName.value;
var email = document.Log.email.value;
var password = document.Log.password.value;
var confirmPassword = document.Log.confirmPassword.value;
var status = false;
if (fName.length < 1) {
document.getElementById("firstNameLoc").innerHTML =
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status = false;
} else {
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Done..!';
status = true;
}
return status;
}
<div id="_div2">
<center>
<div class="contianer">
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>

Email validation for specific domain not working

I have the following form
register.php
<form class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
home.php
<script = "text.javasccript>
$('button').on('click', function(){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
}
});
</script>
I know this question has been asked before but there are no actual answers for it. Where do I integrate the following function to work with the registration form
THIS IS NEW, EDITED CODE BUT DOESNT WORK CAN ANYONE HELP?
My only output message is the one saying that the domain is not allowed even when I type the 'allowed' domain in. Here is my code:
register.php
<fieldset style = "border-radius:30px;">
<legend>Your Personal Details:</legend>
<form class="form" action="staffhome.php" method ="POST" enctype="application/x-www-form-urlencoded">
<br> <input type="text" name="forename" placeholder ="Forename" id="forename"style = "display:inline; float:left;margin-left:5%;"/>
<input type="text" name="surname" placeholder="Surname" id="surname"style = "display:inline; float:left;margin-left:5%;"/>
<input type="email" name="email" placeholder="Email Address" id="email"style = "display:inline; float:left;margin-left:5%;"/><br /><br><br><br>
<script type = "text/javascript">
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'wearecallidus.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
</script>
<input type="text" name="phone" placeholder="Phone Number" id="phone"style = "display:inline;margin-right:2.5%"/>
<input type="text" name="ext" placeholder="Extension Number" id="ext"style = "display:inline;margin-left:2.5%;"/><br>
</br>
<hr style="border-top: dotted 1px;" />
<br> <input type="text" name="securityq" placeholder="Security Question" id="securityq" size ="32" maxlength ="60" style = "display:inline;"/>
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32"style = "display:inline;"/><br />
<br><input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6"/><br><br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder ="Re-Type Your Password" minlength="6"/><br>
</br>
<input id="button" type="submit" value="Register" disabled="disabled" name="submit">
</fieldset>
I get the same output message every time no matter what the input, can anyone tell me why?

I would do this if I were to have the js in the same page instead of externalising it:
<!DOCTYPE html>
<html>
<head>
<title>Form example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var allowedDomains = [ 'correct.com' ];
$('#myForm').on('submit', function(e) { // when the form is submitted
var str = $('#email').val(),
domain = str.split('#')[1]; // split on # and take the second part
if ($.inArray(domain, allowedDomains) == -1) {
alert(domain+' not allowed');
e.preventDefault(); // stop form submission
}
});
});
</script>
</head>
<body>
<div id="content">
<form id="myForm" class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
<input type="submit" />
</form>
</div>
</body>
</html>
Example
$(function() {
var allowedDomains = ['correct.com'];
$('#myForm').on('submit', function(e) {
var str = $('#email').val(),
domain = str.split('#')[1];
if (!domain) domain="An empty domain"
$("#emailmsg").html("").hide()
if ($.inArray(domain, allowedDomains) == -1) {
$("#emailmsg").html(domain + ' not allowed').show();
e.preventDefault(); // stop form submission
}
});
});
#emailmsg { display:none; color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<form id="myForm" class="form" action="home.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email" /> <span id="emailmsg"></span><br/>
<input type="submit" />
</form>
</div>
Using your form after removing the disabled from the submit and added ID="myForm" and a span:
var allowedDomains = ['correct.com'];
function checkEmail(emailId) {
var $email=$("#"+emailId);
var str = $email.val(),domain = str.split('#')[1];
if (!domain) domain = "Empty domain";
if ($.inArray(domain, allowedDomains) == -1) {
$email.attr("placeholder", domain + ' not allowed').addClass("redborder");
}
else {
$email.attr("placeholder", "Email address").removeClass("redborder");
}
}
$(function() {
$('#myForm').on('submit', function(e) {
if (!checkEmail("email")) e.preventDefault(); // stop form submission
});
$("#email").on("keyup, blur",function() { checkEmail("email"); } );
});
.redborder {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset style="border-radius:30px;">
<legend>Your Personal Details:</legend>
<form id="myForm" class="form" action="staffhome.php" method="POST" enctype="application/x-www-form-urlencoded">
<br>
<input type="text" name="forename" placeholder="Forename" id="forename" style="display:inline; float:left;margin-left:5%;" />
<input type="text" name="surname" placeholder="Surname" id="surname" style="display:inline; float:left;margin-left:5%;" />
<input type="email" name="email" placeholder="Email Address" id="email" style="display:inline; float:left;margin-left:5%;" />
<br>
<br>
<br>
<br>
<input type="text" name="phone" placeholder="Phone Number" id="phone" style="display:inline;margin-right:2.5%" />
<input type="text" name="ext" placeholder="Extension Number" id="ext" style="display:inline;margin-left:2.5%;" />
<br>
</br>
<hr style="border-top: dotted 1px;" />
<br>
<input type="text" name="securityq" placeholder="Security Question" id="securityq" size="32" maxlength="60" style="display:inline;" />
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32" style="display:inline;" />
<br />
<br>
<input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6" />
<br>
<br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder="Re-Type Your Password" minlength="6" />
<br>
</br>
<input id="button" type="submit" value="Register" name="mySubmit">
</fieldset>

If you're validating with javascript, I suggest having the script in the same page as the form. Also, since its javascript, why not do it dynamically instead of having to wait for the user to submit?
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
Working fiddle:
https://jsfiddle.net/j84mqq6k/1/

Try with this using jQuery.
var email = $("#email").val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (email === null || email === "") {
alert('Please enter email address.!');
$('#email').focus();
} else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
alert('Please enter valid email address.!');
$('#email').focus();
}