Develop Reference

Form is not being submitted in html and javascript

I am trying to save data to a table, but it is supposed to submit if everything is good
JAVASCRIPT:
const formm = document.querySelector('#CreateAccount')
const school = document.querySelector('#skool');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const pwd = document.querySelector('#password');
const conf = document.querySelector('#confpassword');
formm.addEventListener("submit", (event) => {
validateForm();
if(result == true){
formm.submit();
console.log(2);
}else{
event.preventDefault();
console.log(30);
}
console.log(30);
});
function isFormValid(){
const inputscontainers = document.querySelectorAll('.inputs')
let result=true;
inputscontainers.forEach((container) => {
if(container.classList.contains("error")){
return false;
}})
return result;
}
function validateForm(){
if(username.value.trim() == ''){
setError(username, 'Name cannot be empty');
}else if(username.value.trim() < 5){
setError(username, 'Idrc');
console.log(3);
}
else{
setSuccess(username);
}
if(email.value.trim() == ''){
setError(email, 'You forgot to fill in your email.');
}
else if(isEmailValid(email.value)){
setSuccess(email);
}else{
setError(email, "Provide a valid email");
}
if(pwd.value.trim()==''){
setError(pwd, "Password can't be empty");
}else if(pwd.value.trim().length<6 || pwd.value.trim().length>20){
setError(pwd, 'Length must be minimum 6 characters and max 20.');
}else{
setSuccess(pwd);
}
if(conf.value.trim() == ''){
setError(conf, 'This is an empty password');
}else if(conf.value !== pwd.value){
setError(conf, 'Passwords dont match');
}
else{
setSuccess(conf);
}
}
function setError(elementr, errorMessage){
const parents = elementr.parentElement;
parents.classList.add("error");
parents.classList.remove("success");
const paragraph = parents.querySelector('p').textContent = errorMessage;
}
function setSuccess(elementr){
const parents = elementr.parentElement;
parents.classList.add("success");
parents.classList.remove("error");
}
function isEmailValid(email){
const reg =/^(([^<>()[\]\.,;:\s#\"]+(\.[^<>()[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
return reg.test(email);
}
HTML
<form id="CreateAccount" action="techer.php" method="GET">
<div class="main">
<div class="Title">
<h1>Enter your details.</h1>
</div>
<div class="inputs">
<label for="skool">SchoolName:</label>
<input type="text" id="skool" placeholder ="Put the school name" name="skool"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="username">Username:</label>
<input type="text" id="username" placeholder ="Username" name="username">
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="password">Password</label>
<input type="password" id="password" placeholder =" Password" name="password"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="confpassword">Confirm Password</label>
<input type="password" id="confpassword" placeholder =" Confirm Password" name="confpassword"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="email">Email:</label>
<input type="email" id="email" placeholder ="Email" name="email"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<button class="submitbtn" type="submit">Submit</button>
</div>
</div>
</form>
As far as the eye can see, there are no errors, and it is not saving data to my php database, which is worrying. My expected result is for, when everything is correct, the from to be submitted then redirected to a php file! But what is happening, even if everything in the form is correct, it wont submit. Please HELP!!

Try adding, at the end of validateForm function:
return isFormValid();
then in your submit listener, change
validateForm();
to
let result = validateForm();

I created an email form validation function that displays an alert message but am not satisfied

I created the function to display the alert message on keypress then if the user does not include "#" in the field, it should keep showing but once "#" is added then the alert message should disappear.
Here is the code:
function makeHappen() {
var take = document.getElementById('emailID');
var a = document.getElementById("alert3second");
if (!take.value.indexOf("#") > -1) {
a.style.display = "block"
} else {
a.style.display = "none"
}
}
<div class="form-group">
<input type="email" class="form-control font-weight-bold" placeholder="YOUR EMAIL ADDRESS" id="emailID" onclick="formValidator2()" name="budget3" onkeypress="makeHappen()" required>
<div id="alert3" class="alert-danger">
<i class="fa fa-warning pr-2 pt-1"></i>
Please Your email address is required
</div>
<div id="alert3second" class="alert-danger">
<i class="fa fa-warning pr-2 pt-1"></i>
Enter a valid email
</div>
</div>

instead of using onkeypress use onkeyup
The onkeyup attribute fires when the user releases a key (on the
keyboard).
https://www.w3schools.com/tags/ev_onkeyup.asp
and add style="display:none;" to alert3second div to make the message disappears when there is no value in the input
function makeHappen() {
var take = document.getElementById('emailID');
var a = document.getElementById("alert3second");
if (take.value.indexOf("#") == -1) {
a.style.display = "block"
} else {
a.style.display = "none"
}
}
<div class="form-group">
<input type="email" class="form-control font-weight-bold"
placeholder="YOUR EMAIL ADDRESS"
id="emailID" onclick="formValidator2()"
name="budget3" onkeyup="makeHappen()" required>
<div id="alert3" class="alert-danger">
<i class="fa fa-warning pr-2 pt-1"></i>
Please Your email address is required
</div>
<div id="alert3second" class="alert-danger" style="display:none;">
<i class="fa fa-warning pr-2 pt-1"></i>
Enter a valid email
</div>
</div>

The logic of your if statement needs to be made clearer:
if (take.value.indexOf('#') == -1)
You can test this by running your current if statement like so:
> !"hello".indexOf("#") > -1
true
> !"hello#".indexOf("#") > -1
true
I would probably point out that you should name your variables a bit better. Maybe instead of 'take' you should call it emailID?
function validateEmail() {
var emailId = document.getElementById('emailID').value;
var errorMsg = document.getElementById('alert3second');
if (emailId.indexOf('#') == -1) {
errorMsg.style.display = 'block';
} else {
errorMsg.style.display = 'none';
}
}

How to order icon next to a span in HTML with CSS?

I am trying to do something like a verification on contact form, e.g if email does not contain "#" and "." show icon of red X and if the conditions are done show green check mark. I need answer on 2 questions: 1. How to align the icon next to the span and the 2. How to center the form in the middle of the screen? I tried with display:flex, many other floats, positions, aligns and every solution I found in the internet, but I anything had success in setting the icon between different tags and centering the form in the middle of the screen but the only one thing I came to is: link
< script type = "text/javascript" >
$(document).ready(function() {
$('.submit').click(function(event) {
console.log('Clicked button')
var name = $('.name').val()
var email = $('.email').val()
var phone = $('.phone').val()
var message = $('.message').val()
var statusElm = $('.status')
statusElm.empty()
if (email.length > 5 && email.includes('#') && email.includes('.')) {
statusElm.append('<i style="color: green; font-size:2.3em;" class="fas fa-check"></i>')
} else {
event.preventDefault()
statusElm.append('<i style="color: red; font-size:2.3em;" class="fas fa-times"></i>')
}
if (phone.length > 7 && phone.legth < 14) {
statusElm.append('<i style="color: green; font-size:2.3em;" class="fas fa-check"></i>')
} else {
event.preventDefault()
statusElm.append('<i style="color: red; font-size:2.3em;" class="fas fa-times"></i>')
}
if (message.length > 20) {
statusElm.append('<i style="color: green; font-size:2.3em;" class="fas fa-check"></i>')
} else {
event.preventDefault()
statusElm.append('<i style="color: red; font-size:2.3em;" class="fas fa-times"></i>')
}
})
}) <
/script>
<div class="mail " id="mail">
<div class="container">
<h3 class="w3l_head w3l_head1">Contact Me</h3>
<p class="w3ls_head_para w3ls_head_para1">send Me a message</p>
<div class="w3_mail_grids">
<form action="https://formspree.io/ntodorov301#gmail.com" method="POST" class="justify-content-center">
<div class="col-md-6 w3_agile_mail_grid">
<span class="input input--ichiro"><input
class="input__field input__field--ichiro" type="text" name="name"
id="input-25" placeholder=" " >
<label class="input__label input__label--ichiro" for="input-25">
<span class="input__label-content input__label-content--ichiro">Your
Name</span>
</label>
</span>
<a class="status" name="status"></a> <span class="input input--ichiro"> <input
class="input__field input__field--ichiro email" type="email" name="Email"
id="input-26" placeholder=" " > <label
class="input__label input__label--ichiro" for="input-26">
<span class="input__label-content input__label-content--ichiro">Your
Email</span>
</label>
</span> <span class="input input--ichiro"> <input
class="input__field input__field--ichiro phone" type="text" name="phone"
id="input-27" placeholder=" " > <label
class="input__label input__label--ichiro" for="input-27">
<span class="input__label-content input__label-content--ichiro">Your
Phone Number</span>
</label>
</span>
</div>
<div class="col-md-6 w3_agile_mail_grid">
<textarea class="message" name="message" placeholder="Your Message"></textarea>
<input type="submit" value="Submit" class="submit">
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>

The Bootstrap is alredy used on the page. Thus, I recommend you to apply validation feature of the framework instead of creation of custom CSS rules. You could use .is-valid and .is-invalid styles for the controls or constraint validation API within custom validation methods.
The following example will help you to get started. I don't want to post too much code, therefore my form contains a single control.
document.getElementById('emailField')
.addEventListener('input', function(e) {
this.classList.remove('is-valid', 'is-invalid')
if (!isValidEmail(this.value))
this.classList.add('is-invalid');
else
this.classList.add('is-valid');
}, false);
document.getElementById('myForm')
.addEventListener('submit', function(e) {
checkEmail(document.getElementById('emailField'));
if (!this.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
this.classList.add('was-validated');
}, false);
function checkEmail(control) {
if (!isValidEmail(control.value)) {
control.setCustomValidity('The e-mail is invalid.');
console.log(control.validationMessage);
} else {
control.setCustomValidity('');
}
}
function isValidEmail(email) {
return /^[\w!#$%&'*+-\/=\?^_`{|}~](\.?[\w!#$%&'*+-\/=\?^_`{|}~])*#gmail\.com$/i.test(email);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<form id="myForm" novalidate>
<div class="form-group">
<label for="emailField">Email address</label>
<input type="email" class="form-control" id="emailField" aria-describedby="emailHelp" placeholder="Enter email">
<small class="valid-feedback">The e-mail address is valid!</small>
<small class="invalid-feedback">The e-mail address is invalid.</small>
<small id="emailHelp" class="form-text text-muted">Only Gmail is supported</small>
</div>
<button class="btn btn-primary" type="submit">Send</button>
</form>
</div>
The snippet uses .is-invalid and .is-valid classes to indicate validation result while user is inputing e-mail address. In the submit event handler the constraint validation API is used. The forms allows to send only address of Gmail. If you will try to use another domain it throws an error.

Remember me function autocomplete is not working using jquery

$(function() {
if (localStorage.chkbx && localStorage.chkbx != '') {
$('#modal_login_remember').attr('checked', 'checked');
$('#modal_login_email').val(localStorage.usrname);
$('#modal_login_password').val(localStorage.pass);
} else {
$('#modal_login_remember').removeAttr('checked');
$('#modal_login_email').val('');
$('#modal_login_password').val('');
}
$('#modal_login_remember').click(function() {
if ($('#modal_login_remember').is(':checked')) {
// save username and password
localStorage.usrname = $('#modal_login_email').val();
localStorage.pass = $('#modal_login_password').val();
localStorage.chkbx = $('#modal_login_remember').val();
} else {
localStorage.usrname = '';
localStorage.pass = '';
localStorage.chkbx = '';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<p style="text-align: center"><i>Enter your email ID and password to log in to Help.</i></p>
<div id="errormsg" style="display: none; color:red;text-align: center; padding-bottom: 1.2rem;"> Invalid token or login credentials, please log in again.</div>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" id="modal_login_email" name="modal_login_email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-unlock-alt"></i>
</span>
<input type="password" id="modal_login_password" name="modal_login_password" class="form-control" placeholder="Password" />
</div>
</div>
<label class="custom-control custom-checkbox">
<input type="checkbox" id="modal_login_remember" class="custom-control-input" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remember me</span>
</label>
<div class="modal-footer">
<input type="button" onclick="login(document.getElementById('modal_login_email').value,document.getElementById('modal_login_password').value);" class="btn btn-primary" value="Login" style="background-color: #19659d; border-color: #19659d;" />
</div>
If a user click on remember checkbox at the time of login, the details should to be saved in localstorage. If user tries to login again user details should autocomplete (if user types few letter of his name, name and password should autocomplete). There is no api for it, so i need to do it from front-end.
The value are getting stored in localstorage but the autocomplete is not working ho to approach it.

You can use this code, and you can define the local storage as an object it's would be nic to have.
$(function() {
if (localStorage.chkbx && localStorage.getItem(chkbx) !=='') {
$('#modal_login_remember').attr('checked', 'checked');
$('#modal_login_email').val(localStorage.getItem(usrname));
$('#modal_login_password').val(localStorage.getItem(pass));
} else {
$('#modal_login_remember').removeAttr('checked');
$('#modal_login_email').val('');
$('#modal_login_password').val('');
}
$('#modal_login_remember').click(function() {
if ($('#modal_login_remember').is(':checked')) {
// save username and password
localStorage.setItem('usrname',$('#modal_login_email').val());
localStorage.setItem('pass',$('#modal_login_password').val());
localStorage.setItem('chkbx', $('#modal_login_remember').val());
} else {
localStorage.setItem('usrname', '');
localStorage.setItem('pass', '');
localStorage.setItem('chkbx', '');
}
});
});

validation error message did not show correctly for related inputs

my validation error message didnot show correctly.for example I insert value on Name input but validation error message of email was shown or when I insert value on phone input,validation of email was shown.I want when I insert value in specific input only the validation error message of it was shown.
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send/>
</div>
</form>
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
}
else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
}
else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12 ) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}

I found some issue in the form and updated here
Form send button does not close properly
.contactFormnot not added on form tag
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
} else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
} else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
} else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
} else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send" />
</div>
</form>

You always make validations all together. So whenever a keyup is made on any field, all validations take place.
To avoid this you can proceed in at least 2 ways.
Way 1
You can check the id of the element which fired the event and validate only that field logic. You'll mantain an unique function, adding an if for each field validation
Ex.
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
var id=$(this).attr("id");
if(id==="email"){
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
}
...
and so on for each field..
Way 2
Alternatively you can make and handler function for each specific field, removing $(".contactForm input,.contactForm textarea").each(function () {.
Ex.
$("#name").keyup(function () {
if ($(this).val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
});
.....
and so on for each field