Develop Reference

InnerHTML in multiple fiields and more than one error statements

I am having trouble trying to get the form to validate using the onblur handler.
What I am trying to do is to get the first and last name field to display an error message if the field is blank, if it’s less than 5 , more than 18 characters, or it the user enters a number.
I would like to be able to do this using only one function so I do not need to do this for seperate functions.
Eg:
function ValidateName(field) {
var field = field.value;
var output = document.getElementById("fnameError");
if (field == "")
{
output = "field can’t be blank.";
return false;
}
else
{
output = "";
}
}
<form>
<input type="Text" id="Fname" onblur="ValidateName(this)">
<span id="fnameError"></span>
</form>

Your answer according to the question.
function ValidateName(field) {
var output = document.getElementById("fnameError");
if (field.value == "")
{
output.innerHTML = "field can’t be blank.";
}
else
{
output.innerHTML = "";
}
}
<form>
<input type="Text" id="Fname" onblur="ValidateName(this)">
<span id="fnameError"></span>
</form>
Your answer according to the the comment made on my answer.
function ValidateName() {
var outputF = document.getElementById("fnameError");
var outputL = document.getElementById("lnameError");
var outputB = document.getElementById("BothError");
var field1 = document.getElementById("Fname");
var field2 = document.getElementById("Lname");
if (field1.value == "" && field2.value == "")
{
outputF.innerHTML = "";
outputB.innerHTML = "No field can be left blank.";
outputL.innerHTML = "";
}
else if (field1.value !== "" && field2.value == "")
{
outputF.innerHTML = "";
outputB.innerHTML = "";
outputL.innerHTML = "field can’t be blank.";
}
else if (field1.value == "" && field2.value !== "")
{
outputF.innerHTML = "field can’t be blank.";
outputB.innerHTML = "";
outputL.innerHTML = "";
}
else {
outputF.innerHTML = "";
outputB.innerHTML = "";
outputL.innerHTML = "";
}
}
<form>
<input type="Text" id="Fname" onblur="ValidateName()">
<span id="fnameError"></span>
<br><br>
<input type="Text" id="Lname" onblur="ValidateName()">
<span id="lnameError"></span>
<br><br>
<span id="BothError"></span>
</form>

you can try this also
function validateform(){
var name=document.myform.name.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(name.length < 5){
alert("name must be atleast 8 characters long");
return false;
}
else if(name.length <18){
alert("text must be more than 18 characters");
return false;
}
}
<form name="myform" method="post" action="" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
<input type="submit" value="register">
</form>

jQuery and input forms

I made this input form with Name and Text.
<form action="" method="post" class="main">
<label>Write a comment!</label><br>
<input placeholder="Name" class="form-text" name="user" type = "text" id = "user" autofocus size = "48"><br/>
<textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>
and I added some jQuery for this form.
$(".form-submit").click(function() {
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
if(commentCheck == '' || commentCheck == NULL ) {
commentBox.addClass("form-text-error");
console.log(commentBox);
return false;
}
if (userCheck == '' || userCheck == NULL){
userBox.addClass("form-text-error");
console.log(userBox);
return false;
}
});
And now I'm here with this problem. I want the user to fill both fields in order to write a comment (name & text). For any empty fields I want to add class "form-text-error" . Everything works except for field with users name.
Any suggestions?

Use Length to get length of input then if return zero do addClass
$(".form-submit").click(function() {
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
if (commentCheck.length <= 0 || commentCheck == NULL) {
commentBox.addClass("form-text-error");
console.log(commentBox);
return false;
}
if (userCheck.length <= 0 || userCheck == NULL) {
userBox.addClass("form-text-error");
console.log(userBox);
return false;
}
});
.form-text-error {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="main">
<label>Write a comment!</label><br>
<input placeholder="Name" class="form-text" name="user" type="text" id="user" autofocus size="48"><br/>
<textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>
Also you can use submit function instead of click:
$(".form-submit").submit(function() {});
But i recommend you to use something like this:
$(".form-submit").click(function(e) {
e.preventDefault(); //remove this later
$('.form-text').each(function() {
if ($(this).val().length <= 0) {
$(this).addClass('form-text-error');
return false;
} else {
$(this).removeClass('form-text-error');
return true;
}
});
});

it is due to condition if return with false so it will check 1st condition and return back no further check.
need to make changes accordingly as below.
$(".form-submit").click(function() {
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var err = false;
if(commentCheck == '' || commentCheck == NULL ) {
commentBox.addClass("form-text-error");
console.log(commentBox);
err = true;
}
if (userCheck == '' || userCheck == NULL){
userBox.addClass("form-text-error");
console.log(userBox);
err = true;
}
if(err)
return false;
});

You are doing return false after comment
if(commentCheck == '' || commentCheck == NULL ) {
commentBox.addClass("form-text-error");
console.log(commentBox);
return false;
}
That's why it didn't get name field
You can use like this as like your requirement,
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
if(commentCheck == '' || commentCheck == NULL ) {
$("#comment").addClass("form-text-error");
console.log(commentBox);
flag = 1;
}
if (userCheck == '' || userCheck == NULL){
$("#user").addClass("form-text-error");
console.log(userBox);
flag = 1;
}
if(flag == 1)return false;

Use input type="button" and use this snippet that's tested and it works...
$("#comment").removeClass("form-text-error");
$("#user").removeClass("form-text-error");
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
var flag1 =0;
if(commentCheck == '' || commentCheck == null ) {
$("#comment").addClass("form-text-error");
console.log(commentBox);
flag = 1;
}
if (userCheck == '' || userCheck == null){
$("#user").addClass("form-text-error");
console.log(userBox);
flag1 = 1;
}
if(flag == 1 || flag1 == 1){return false;}
else{return true;}

You are returning false for both the validations.
Also, use .length === 0 || !box.
A common function would help.
Fixed
use e.preventDefault(); This would validate the username field as well and would not submit if empty.
var commentBox = $("#comment");
var userBox = $("#user");
function checkIfEmpty(box, check) {
if (check.length === 0 || !box) {
box.addClass("form-text-error");
console.log(box);
return true;
} else {
box.removeClass("form-text-error");
return false;
}
}
$(".form-submit").on('click', function(e) {
e.preventDefault();
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var commentCall = checkIfEmpty(commentBox, commentCheck);
var userCall = checkIfEmpty(userBox, userCheck);
if(userCall === true && commentCall === true) {
return false;
}
});
.form-text-error {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="main">
<label>Write a comment!</label>
<br/>
<input placeholder="Name" class="form-text" name="user" type="text" id="user" autofocus size="48"/>
<br/>
<textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
<br/>
<input type="submit" class="form-submit" name="new_comment" value="Submit comment"/>
</form>

javascript "if" statement returning false value when both values are equal

I was trying out an HTML/JS login system, (which was only a learning experience, not to be used in a real case) There is an if statement that should return true when someone entered the correct username and password, but it returned false, and I can't figure out why.
here is the code i used:
var count = 2;
function validate() {
var un = document.login.username.value;
var pw = document.login.password.value;
var valid = false;
var usernameArray = ["Adam", "Adam2"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++) {
if ((un == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
if (valid) {
alert("Logging in...");
window.location.href = "http://www.google.com";
return false;
}
var again = " tries";
if (count == 1) {
again = " try";
}
if (count >= 1) {
alert("Username and password do not match.");
count--;
} else {
alert("Username and password do not match. You are now blocked.")
document.login.username.value = "You are now blocked";
document.login.password.value = "You can not see this";
document.login.username.disabled = true;
document.login.password.disabled = true;
return false;
}
}
}
<div class="container">
<div class="header">
<h1>Login Page</h1>
</div>
<form name="login" onsubmit="return validateForm();" method="post">
<ul>
<li>Username:
<input class="username" type="text" name="username">
</li>
<li>Password:
<input class="password" type="password" name="password">
</li>
</ul>
<input type="button" class="submit" value="Login" name="submit" onclick="validate()">
</form>
</div>

You are breaking the loop and your if(valid) code is within the for loop. You probably meant to have the if(valid) outside the for loop scope.
For example you can do:
valid = false;
for (var i = 0; i < usernameArray.length; i++) {
if ((un == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert("Logging in...");
window.location.href = "http://www.google.com";
return false;
}
Notice I closed the for loop.
Also notice you have an valid=true after the if statement. I assume you did it for debugging purposes, but make sure to remove it.

Its in your for loop. The logic after the valid credentials check is at a wrong place, it should be out of the for loop.
var count = 2;
function validate() {
var un = document.login.username.value;
var pw = document.login.password.value;
var valid = false;
var usernameArray = ["Adam", "Adam2"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++) {
if ((un == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert("Logging in...");
window.location.href = "http://www.google.com";
return false;
}
var again = " tries";
if (count == 1) {
again = " try";
}
if (count >= 1) {
alert("Username and password do not match.");
count--;
} else {
alert("Username and password do not match. You are now blocked.")
document.login.username.value = "You are now blocked";
document.login.password.value = "You can not see this";
document.login.username.disabled = true;
document.login.password.disabled = true;
return false;
}
}
<div class="container">
<div class="header">
<h1>Login Page</h1>
</div>
<form name="login" onsubmit="return validateForm();" method="post">
<ul>
<li>Username:
<input class="username" type="text" name="username">
</li>
<li>Password:
<input class="password" type="password" name="password">
</li>
</ul>
<input type="button" class="submit" value="Login" name="submit" onclick="validate()">
</form>
</div>

It is a very bad idea to implement login in javascript on the client side. Anyone can see your passwords.
That said, your problem is that you exit the loop as soon as you find a matching username and password. So your if statement is never reached.

Javascript Form Validation Not Successful

Practicing my Javascript on a simple HTML form. Enter password in one box, enter again to confirm in the second. Password should contain 6 character (including 1 number), and no spaces. An alert message should pop up if the passwords meet the criteria and match.
I have it mostly there, in that the error messages pop up if the criteria aren't met, but I can't get to alert "Success!" I've toyed with the if statements so many ways, I'm not sure what I'm missing. Any suggestions?
Javascript:
window.onload = function() {
document.getElementById('submit').addEventListener('click', validateInput);
}
var userPass = document.getElementById('password').value;
var confirmPass = document.getElementById('confirm_password').value;
function validatePassword() {
var userPass = document.getElementById('password').value;
if (userPass.length == 0) { // Nothing was entered
document.getElementById('password_error').innerHTML = 'Please enter a password';
} else if (userPass.length < 6) { // Less than 6 chars
document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length';
} else if (userPass.match(/\s/)) { // contains a space
document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces';
} else if (!userPass.match(/\d/)) { // Does not contain a number
document.getElementById('password_error').innerHTML = 'Your password must contain a number';
} else if (userPass !== confirmPass) {
document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
} else {
document.getElementById('password_error').innerHTML = "";
document.getElementById('confirm_error').innerHTML = "";
alert("Success!");
clearFields();
}
}
function validateConfirm() {
function clearFields (){
document.getElementById('password').value=null;
document.getElementById('confirm_password').value=null;
}
if (confirmPass.length == 0) {
document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed";
} else if (confirmPass.length < 6) {
document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length";
} else if (userPass !== confirmPass) {
document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
} else {
document.getElementById('password_error').innerHTML = "";
document.getElementById('confirm_error').innerHTML = "";
alert("Success!");
clearFields();
}
}
function validateInput() {
validatePassword();
validateConfirm();
}
The form:
<form>
<fieldset>
<legend>CONFIRM PASSWORD</legend>
<label for="name">Password: </label>
<input type="text" id="password" size="10" />
<p id="password_error" class="error"></p>
<label for="name">Confirm Password: </label>
<input type="text" id="confirm_password" size="10" />
<p id="confirm_error" class="error"></p>
<button id="submit">Submit</button>
</fieldset>
</form>

I've found two fault in your code
Set clearFields() function outside function validatePassword();
var confirmPass enter inside function or pass from calling function
window.onload = function () {
document.getElementById('submit').addEventListener('click', validateInput);
}
function validatePassword() {
var userPass = document.getElementById('password').value;
var confirmPass = document.getElementById('confirm_password').value;
if (userPass.length == 0) { // Nothing was entered
document.getElementById('password_error').innerHTML = 'Please enter a password';
} else if (userPass.length < 6) { // Less than 6 chars
document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length';
} else if (userPass.match(/\s/)) { // contains a space
document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces';
} else if (!userPass.match(/\d/)) { // Does not contain a number
document.getElementById('password_error').innerHTML = 'Your password must contain a number';
} else if (userPass !== confirmPass) {
document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
} else {
document.getElementById('password_error').innerHTML = "";
document.getElementById('confirm_error').innerHTML = "";
alert("Success!");
clearFields();
}
}
function clearFields() {
document.getElementById('password').value = null;
document.getElementById('confirm_password').value = null;
}
function validateConfirm() {
var userPass = document.getElementById('password').value;
var confirmPass = document.getElementById('confirm_password').value;
if (confirmPass.length == 0) {
document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed";
} else if (confirmPass.length < 6) {
document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length";
} else if (userPass !== confirmPass) {
document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
} else {
document.getElementById('password_error').innerHTML = "";
document.getElementById('confirm_error').innerHTML = "";
alert("Success!");
clearFields();
}
}
function validateInput() {
validatePassword();
validateConfirm();
}
<form>
<fieldset>
<legend>CONFIRM PASSWORD</legend>
<label for="name">Password: </label>
<input type="text" id="password" size="10" />
<p id="password_error" class="error"></p>
<label for="name">Confirm Password: </label>
<input type="text" id="confirm_password" size="10" />
<p id="confirm_error" class="error"></p>
<button id="submit">Submit</button>
</fieldset>
</form>

There are multiple issues
The function clearFields() is available only inside validateConfirm
You are reading the value of the confirm input only once at the page load, you need to read the new value within the validate method else it will always be empty string
Since you are validating the policy in the password field, not need to check it again for the confirm field since you are checking whether the confirm and password fields are the same
window.onload = function() {
document.getElementById('submit').addEventListener('click', validateInput);
}
function validatePassword() {
var userPass = document.getElementById('password').value;
var confirmPass = document.getElementById('confirm_password').value;
if (userPass.length == 0) { // Nothing was entered
document.getElementById('password_error').innerHTML = 'Please enter a password';
} else if (userPass.length < 6) { // Less than 6 chars
document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length';
} else if (userPass.match(/\s/)) { // contains a space
document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces';
} else if (!userPass.match(/\d/)) { // Does not contain a number
document.getElementById('password_error').innerHTML = 'Your password must contain a number';
} else if (userPass !== confirmPass) {
document.getElementById('password_error').innerHTML = "";
document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
} else {
document.getElementById('password_error').innerHTML = "";
document.getElementById('confirm_error').innerHTML = "";
alert("Success!");
clearFields();
return true;
}
return false;
}
function clearFields() {
document.getElementById('password').value = '';
document.getElementById('confirm_password').value = '';
}
function validateInput() {
return validatePassword();
}
<fieldset>
<legend>CONFIRM PASSWORD</legend>
<label for="name">Password:</label>
<input type="text" id="password" size="10" />
<p id="password_error" class="error"></p>
<label for="name">Confirm Password:</label>
<input type="text" id="confirm_password" size="10" />
<p id="confirm_error" class="error"></p>
<button id="submit">Submit</button>
</fieldset>

validation is not done on submit button click

<script>
function ValidateEmail(){
var emailID = document.getElementById("email").value;
var email = document.getElementById("email");
var emailRegexp=/^[a-z]+\w+([\.-]?\w+)*#[a-z]+\w+([\.-]?\w+)*(\.[a-z]{2,3})+$/i;
if ((emailID==null)||(emailID=="")){
// alert("Please Enter your Email ID");
email.style.borderColor="red";
document.getElementById("err").innerHTML = "Please Enter your Email ID";
emailID.focus();
return false;
}
else
if (!emailRegexp.test(emailID)){
//alert("Please Enter valid Email ID");
email.style.borderColor="red";
document.getElementById("err").innerHTML = "Please Enter valid Email ID";
emailID.focus();
return false;
}
else
{
email.style.borderColor="#e1e1e1";
document.getElementById("err").innerHTML ="";
return true;
}
}
function validUsername()
{
var error = "";
var illegalChars = /\W/; // No special Characters allowed
var fd =document.getElementById("name");
if (fd.value == "" || fd.value == null)
{
fd.style.borderColor = 'Red';
document.getElementById("UserErr").innerHTML = " Field is left Blank.\n";
return false;
}
else if ((fd.value.length < 5) || (fd.value.length > 20)) // Number of Character entered is checked
{
fd.style.borderColor = 'Red';
document.getElementById("UserErr").innerHTML = "Username is should be in a range of 5 and 15..\n";
return false;
}
else if (illegalChars.test(fd.value)) // check for illegal characters
{
fd.style.borderColor = 'Red';
document.getElementById("UserErr").innerHTML = "Illegal Characters not allowed\n";
return false;
}
else
{
fd.style.borderColor = '#e1e1e1';
document.getElementById("UserErr").innerHTML = "";
return true;
}
}
function validPassword()
{
var error = "";
var password=document.getElementById("pass");
var passError=document.getElementById("PassErr");
var illegalChars = /[\W_]/; // Numbers and letter only
var checkPass=/\w*[a-z]+\d+\w*/i;
if (password.value == "" || password.value == null)
{
password.style.borderColor = 'Red';
passError.innerHTML = "Field Cannot be blank.\n";
return false;
}
else if ((password.value.length < 8) || (password.value.length > 20)) // Checks length of the password
{
password.style.borderColor = 'Red';
passError.innerHTML = "Length should be in Range of 8 to 20. \n";
return false;
}
else if (illegalChars.test(password.value))
{
password.style.borderColor = 'Red';
passError.innerHTML = "Illegal characters not allowed.\n";
return false;
}
else if (!checkPass.test(password.value)) // Checks for numeric value in entered password
{
password.style.borderColor = 'Red';
passError.innerHTML = "Atleast one Numeric value Required ";
return false;
}
else
{
password.style.borderColor = '#e1e1e1';
passError.innerHTML = "";
return true;
}
}
function validateOnSubmit()
{
if(ValidateEmail() && validUsername() && validPassword());
return true;
return false;
}
</script>
<form method="post" name="form">
<!--<input type="text" name="email" id="email" placeholder="Your Email" onblur="return ValidateEmail()"/><span id="err"></span></td>-->
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="uname" id="name" placeholder="User Name" onblur="validUsername()"/><span id="UserErr" style="color:red"></span></td>
</tr>
<tr>
<td><input type="text" name="email" id="email" placeholder="Your Email" onblur="ValidateEmail()"/><span id="err"></span></td>
</tr>
<tr>
<td><input type="password" name="pass" id="pass" placeholder="Your Password" onblur="validPassword()" /><span id="PassErr" style="color:red"></span></td>
</tr>
<tr>
<td><button type="submit" onsubmit="return validateOnSubmit()" name="btn-signup">Sign Me Up</button></td>
</tr>
</table>
</form>
I have created registration form and create validation in JavaScript for input fields.
onBlur validation is done, and works fine.
But when I click on the 'Sign Me Up' button, validation is not done and data is inserted into the database. Please I need help.

submit events fire on forms, not submit buttons. Move the onsubmit attribute to the <form> start tag.

"emailID.focus(); " is wrong is in ValidateEmail() function. instead of it
"email.focus(); is right.
Now it works fine as i expected.
but there is no need of this so i removed it.