We Keep Coding

where the error messages will be inserted when the errors that they represent occur

I'm having an issue figuring out how to write the following code:
the problem is that I'm using an empty <div> with the id error-display. This <div> is where the error messages will be inserted when the errors that they represent occur. I want to make all fields validated when the user clicks off of them to the next field. If there’s an error, an error message should be displayed. Likewise, error messages should be removed when the user fixes the problem. yet I'm not sure how to do it! here is what I got so far:
<div id="error-display">
</div>
<form id="project-form">
<br>E-mail:<span class="error">* </span>
<input type="email" name="email" id="email" placeholder="Example#example.com" required>
<br>Password:<span class="error">* </span>
<input type="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="password" required>
<br>Confirm Password:<span class="error">* </span>
<input type="password" placeholder="Repeat Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="password-confirmation" required>
After inserting the emipty "div id="error-display">" what can I do?
lets say the error message is: Invalid email address.
<input type="email" name="email" id="email" placeholder="Example#example.com" required>
I tried "required" in the input elements and it's working for my inputs, however, I think my professor is looking for a different solution.

I suggest you to add change event listener for every input field and to validate each of them and if some are invalid you should set innerText property of the 'error-display' div to error message text

Here's a quick and simple solution for you
in all of your input fields, put onchange="validateField(fieldID, fieldname)" like this
<input type="email" name="email" id="email" onchange="validateField('email', 'Email')" placeholder="Example#example.com" required>
then paste this script below your form (or you can have this in a separate js file)
<script>
function validateField(fieldID, fieldname) {
var inpObj = document.getElementById(fieldID);
if (!inpObj.checkValidity()) {
document.getElementById("error-display").innerHTML = "Invalid " + fieldname + ":" + inpObj.validationMessage;
} else {
//this will clear your error if the input is already correct
document.getElementById("error-display").innerHTML = "";
}
}
</script>

How do I prevent my text area (excually input type email) from not being filled

I have form. Form include name,lastname,email,phone etc. If anybody submit the form without filling email adress my database record this email adress in blank. After this situation if this situation repeat, warning message: same email adress. (First email adress =>blank Second email adress => blank) I want to use regex. Users have to fill email adress. But I could not found any examples. Thanks to much.
Please have a look at the related code:
if (userExists.equals("")) {
bindingResult.rejectValue("email", "error.user", "Lütfen email adresinizi giriniz.");
}
if (userExists != null) {
bindingResult.rejectValue("email", "error.user", "Verilen e-postayla kayıtlı bir kullanıcı var");
}

How about some JavaScript validation code perhaps something like this which doesn't let the form actually submit if the Email field is blank:
<script type="text/javascript"> <!--
function jsValidatePg() {
// Dim var.
var strValid;
// Init.
strValid = "";
// Set var.
if (document.frmMain.Email.value == "") {
strValid = "The Email field must be filled in.";
}
// Determine if valid.
if (strValid == "") {
return true;
}
else {
alert(strValid);
return false;
}
}
//-->
</script>
<form id="frmMain" name="frmMain" action="mypage2.asp" method="post">
<input type="text" name="FirstName" size="15" maxlength="25" value="">
<input type="text" name="LastName" size="15" maxlength="25" value="">
<input type="text" name="Email" size="15" maxlength="25" value="">
<input type="text" name="Phone" size="15" maxlength="25" value="">
<input type="submit" name="btnSubmit" value="Submit" onClick="return jsValidatePg();">

multiple names in input fields

I have a text field that posts to Mysql. It works fine.
What I want to do is have the same field do another function using javascript. It appears thats its one or the other. Not both. Any help would be nice.
This posts to MySQL (adminpassword = Mysql Field):
<input type="password" name="adminpassword" id="adminpassword" class="password" placeholder="e.g. secretpassword">
This Javascript function works, but not post to Mysql: (Obviously)
<input type="password" name="password" id="adminpassword" class="password" placeholder="e.g. secretpassword">
I have tried: (Javascript works, but does not post to MySQL)
<input type="password" name="password adminpassword" id="adminpassword" class="password" placeholder="e.g. secretpassword">
This is the Javascript:
$(document).ready(function() {
$("#showHide").click(function() {
if ($(".password").attr("type") == "password") {
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
});
});

You could use a hidden field and copy the value (before the submit) from the password input to the hidden input:
<input type="password" name="adminpassword" id="adminpassword" class="password" placeholder="e.g. secretpassword">
<input type="hidden" name="password" id="adminpassword">

Ajax PHP not inserting into MySQL database

I'm using Ajax to get POST values from a form. However, when I try to insert the form values in a database on submit, it doesn't get inserted. I still have no idea why it does not work.
Here is my HTML
<form method="post" action="" id="home-sign-up-form">
<input type="text" name="suFirstName" placeholder="First Name" class="text-input-minor" id="sign-up-first-name-text-input">
<input type="text" name="suLastName" placeholder="Last Name" class="text-input-minor" id="sign-up-last-name-text-input">
<input type="text" name="suEmail" placeholder="Email" class="text-input-minor" id="sign-up-email-text-input">
<input type="password" name="suPassword" placeholder="Password" class="text-input-minor" id="sign-up-password-text-input">
<input type="password" name="suConfirmPassword" placeholder="Confirm Password" class="text-input-minor" id="sign-up-confirm-password-text-input">
<input type="text" name="suDisplayName" placeholder="Display Name (you can change this later)" class="text-input-minor" id="sign-up-display-name-text-input">
<br><font class="text-error" id="sign-up-error-text"></font><br>
<label><input type="checkbox" name="suRememberMe" value="yes" id="sign-up-remember-me-checkbox"><font id="sign-up-remember-me-text">Remember me</font></label>
<input name="signUp" type="submit" value="Sign Up" id="sign-up-submit">
</form>
My JS (the console.log does go through and work):
if (validForm)
{
console.log("valid form");
$.ajax(
{
type:'POST',
url:'form-submit.php',
data:$('#home-sign-up-form').serialize(),
success:function(response)
{
$suForm.hide();
$tosppText.hide();
$mailSentIcon.show();
$emailSentText.show();
$emailSentTextEmail.text($suEmail);
$suBox.css("padding-left", "10px");
$suBox.css("padding-right", "10px");
}
});
}
And my PHP/MySQL:
if (isset($_POST['signUp']))
{
echo "<script type='text/javascript'>alert('got');</script>";
$suFirstName = mysqli_real_escape_string($_POST['suFirstName']);
$suLastName = mysqli_real_escape_string($_POST['suLastName']);
$suEmail = mysqli_real_escape_string($_POST['suEmail']);
$suPassword = mysqli_real_escape_string($_POST['suPassword']);
$suDisplayName = mysqli_real_escape_string($_POST['suDisplayName']);
$code = substr(md5(mt_rand()),0,15);
$query = $connection->query("INSERT INTO users (firstName,lastName,email,password,displayName,confirmCode,verified)Values('{$suFirstName}','{$suLastName}','{$suEmail}','{$suPassword}','{$suDisplayName}','{$confirmCode},'{$verified}')");
}
The alert in the PHP code so I would assume that it isn't getting the 'signUp' POST variable. Thanks so much! Any help is appreciated! :D

You get the signUp post variable when you click on the button. If you are posting via ajax call the button variable will not be available as $_POST variable. Please check any other input value.
Another options is have and hidden input set it to some value. And check it on server side. But it is better to check any normal required input of form instead of having extra input control.

$mysqli = new mysqli("localhost", "root", "", "test");
if (isset($_POST['signUp'])){
echo "<script type='text/javascript'>alert('got');</script>";
echo $suFirstName = mysqli_real_escape_string($mysqli,$_POST['suFirstName']);
echo $suPassword = mysqli_real_escape_string($mysqli,$_POST['suPassword']);
$sql="INSERT INTO users (`username`, `password`) VALUES ('$suFirstName', '$suPassword')";
}
if (!mysqli_query($mysqli,$sql)) {
die('Error: ' . mysqli_error($mysqli ));
}
echo "1 record added";
mysqli_real_escape_string requires two arguments the connection and the string.
You can read more :https://www.w3schools.com/php/func_mysqli_real_escape_string.asp

Javascript validation form with no alert()

Im trying to build a HTML form which will validate if a user is entering all the values in each of the input boxes. So far I've found in google examples that when the user leaves the input box blank it would call alert() which is annoying for users if they have to fill up about 10 boxes and then by accident they hit submit now they have to close 10 alerts. I was thinking if is possible to just show a red message next to the empty box(es) indicating which boxes are empty.
Here is my code showing alerts:
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" />
<input type="text" id="subject" name="subject" />
<input type="text" id="examnumber" name="examNumber" />
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>
javascript:
function validateForm(){
var result = true;
var msg = "";
if(document.ExamEntry.name.value==""){
msg+="You must enter your Name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if(document.ExamEntry.subject.value==""){
msg+="You must enter the Subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if(document.ExamEntry.examNumber.value=="")
{
msg+="You must enter the Examination Number \n";
document.ExamEntry.examNumber.focus;
document.getElementById('examnumber').style.color="red";
result = false;
}
if(document.ExamEntry.examNumber.value.length!=4)
{
msg+="Your Examination Number must be 4 characters long \n";
document.ExamEntry.examNumber.focus;
document.getElementById('examnumber').style.color="red";
result = false;
}
var lvlmsg="";
for(var i=0; i < document.ExamEntry.level.length; i++)
{
if(document.ExamEntry.level[i].checked)
{
lvlmsg = document.ExamEntry.level[i].value;
break;
}
}
if(lvlmsg=="")
{
msg+="You Must Indicate Your Level";
result=false;
document.getElementById('radioButtons').style.color="red";
}
else
{
alert(lvlmsg);
}
if(msg==""){
return result;
}
else{
alert(msg);
return result;
}
}
Any ideas?

Create a span element after each input:
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span id="name-msg"></span>
<input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
<input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>
Then instead of doing this:
msg+="You Must Indicate Your Level";
Do:
var msg = document.createTextNode("You Must Indicate Your Level");
document.getElementById('name-msg').appendChild(msg);
And don't forget to remove alerts!

Make sure in your actual code that you are using onclick and not onlick ;)
When I am building form validations, I create a hidden inline span next to each element.
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span>Please use a valid name.</span>
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span>
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>
Then in your css, do something like:
input + span {
display:none;
color: red;
}
In your js remove the alerts, and add something like this for each input:
document.getElementById("[id]").style.display = "inline";