laurence keith albano laurence keith albano - 5 months ago 18
HTML Question

How to alert user to correct input fields in form validation using javascript?

I have this snippet code that will display some error in the

tag whenever the user will input an incorrect field. Instead of using
, when the user leaves it empty, I want my submit form to validate and display an
message saying
'Please check and input correct fields'
before submitting. If the user will input some correct data, it will display a message
'Form Ok'
. Is there any proper way to execute this? Pass the function
onsubmit="return validateForm();"

Please help.

function validateForm()
//Prompts the to correct all fields. How??

//Checks password function
function checkPasswordMatch() {
var password = $("#createpassword").val();
var confirmPassword = $("#confirmpassword").val();

if ((password && confirmPassword) == "") {
} else if (password != confirmPassword) {
$("#divCheckPasswordMatch").html("Password do not match!");
$("#divCheckPasswordMatch").css("color", "red");
} else {
$("#divCheckPasswordMatch").html("Password match.");
$("#divCheckPasswordMatch").css("color", "green");
//trigger keyup event in function checkPasswordMatch
$(document).ready(function() {
$("#createpassword, #confirmpassword").keyup(checkPasswordMatch);

//Add an Email Regular Expression and pass it to function validate
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);

//Email Validate function
function validate() {
var email = $("#email").val();
if (validateEmail(email)) {
} else
$("#checkEmail").text("Please enter a valid email address");
$("#checkEmail").css("color", "red");
//Call the function validate in blur event Jquery

<script src=""></script>
<!DOCTYPE html>
<form action="SignupProcess.php" method="POST" onsubmit="return validateForm();" id="signupform">

<!-- Email Address field -->
<div class="form-group">
<input class="form-control" placeholder="Email" name="email" id="email" type="email" required>
<span id="checkEmail"></span>

<!-- Password input button -->
<div class="form-group">
<input class="form-control" placeholder="Create Password" name="createpassword" oninvalid="setCustomValidity('Please enter a password')" oninput="setCustomValidity('')" id="createpassword" type="password" required>

<!-- Confirm password input button -->
<div class="form-group">
<input class="form-control" placeholder="Confirm Password" name="confirmpassword" oninvalid="setCustomValidity('Please match your password')" oninput="setCustomValidity('')" id="confirmpassword" type="password" required>
<span class="registrationFormAlert" id="divCheckPasswordMatch"></span>

<!-- Submit input button -->
<div class="form-group">
<input type="submit" id="signup" name="signupsubmit" class="btn btn-info form-control" value="Register">



Try removing the onsubmit in the form add replace it using the codes below:

  //validate form
  var condition = validateForm(); //return true or false
    alert('Form OK!');
  //stop submission
    alert('Please check and input correct fields!');
    return false;

Hope it helps =)