laurence keith albano laurence keith albano - 3 months ago 11
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

span
tag whenever the user will input an incorrect field. Instead of using
required
, when the user leaves it empty, I want my submit form to validate and display an
alert
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) == "") {
$("#divCheckPasswordMatch").html("");
} 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)) {
$("#checkEmail").text("");
} else
{
$("#checkEmail").text("Please enter a valid email address");
$("#checkEmail").css("color", "red");
}
}
//Call the function validate in blur event Jquery
$(document).ready(function(){
$("#email").blur(validate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<form action="SignupProcess.php" method="POST" onsubmit="return validateForm();" id="signupform">
<fieldset>

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

<!-- 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>
</div>

<!-- 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>
</div>

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

</fieldset>
</form>
</body>
</html>




Answer

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

$('input[type="submit"]').click(function(e){
  //validate form
  var condition = validateForm(); //return true or false
  if(condition){
    alert('Form OK!');
  }
  //stop submission
  else{
    alert('Please check and input correct fields!');
    e.preventDefault();
    return false;
  }
});

Hope it helps =)

Comments