What's new

Bakit kaya di nagpapakita yun message alert ko

L

loktoy

Eternal Poster
Joined
Oct 20, 2014
Posts
1,166
Solutions
2
Reaction
103
Points
496
Age
30
bakit kaya di nagpapakita yun message alert na" Email|phone is not registered!" sa Validation ko

<?php
include "./config/config.php";
$email_address = $password = '';
$email_addressErr = $passwordErr = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (empty($_POST['email'])) {
$email_addressErr = "Email|phone is required!";
} else {
$email_address = $_POST['email'];
}
if (empty($_POST['password'])) {
$passwordErr = "Password is required!";
} else {
$password = $_POST['password'];
}
if ($email_address && $password) { // Correct the variable name from $username to $email_address
$check_email = mysqli_query($con, "SELECT * FROM registration WHERE email_address = '$email_address'");
$check_email_row = mysqli_num_rows($check_email);
if ($check_email_row > 0) {
while ($row = mysqli_fetch_assoc($check_email)) {
$user_id = $row['user_id'];
$db_password = $row['password'];
$db_user_type = $row['user_type'];

if ($password == $db_password) {
session_start();
$_SESSION['user_id'] = $user_id;
if ($db_user_type == '1') {
$_SESSION['login_success_timestamp'] = time();
header("Location: admin/dashboard.php?login=success");
exit(); // Don't forget to exit after redirecting
} else {
$_SESSION['login_success_timestamp'] = time();
header("Location: user/dashboard.php?login=success");
exit(); // Don't forget to exit after redirecting
}

} else {
$passwordErr = "Password is incorrect!";

}
}
} else {
$email_addressErr = "Email|phone is not registered!";

}
}
}
?>


<!DOCTYPE html>
<HTMl:5>
<head>
<title>login</title>
<link rel="stylesheet" href="../Innerjoin/css/bootstrap.css">
<link rel="stylesheet" href="../Innerjoin/css/style.css">


</head>
<body>
<div class="body-background">
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="display-5 fw-bold lh-1 text-body-emphasis mb-2">BUREAU OF SOILS & <BR> WATER MANAGEMENT| <br> ACCOUNTING SECTION</h1>
<div class="container">
<p class="col-lg-10 fs-6 lh-1 " style ="font-family:'MerriweatherLight';"><span class="dropCaps">B</span> = <span class="dropsmall">Boost
competence on S&W resources research and development to contribute towards agricultural productivity.</span><br>
<span class="dropCaps1">S</span> = <span class="dropsmall1"> Strengthen
linkages and partnerships, and ensure mandatory compliance to relevant statutory and regulatory requirements.</span>
<br>
<span class="dropCaps2">W</span> = <span class="dropsmall2"> Work
towards effective generation, development and delivery of relevant and innovative S&W products and services.</span>
<br>
<span class="dropCaps3">M</span> = <span class="dropsmall3"> Maintain
high level of integrity and utmost professionalism, and promote welfare of all employees.</span>
</p>
</div>
</div>
<div class=" col-lg-5">
<form id="loginForm" method= "POST" action = "" class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="text" class="form-control form-control-sm" name="email" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email | Phone Number">
<div class="error"></div>
<div class="error-message" id="emailErrorMessage"></div>
</div>
<div class="form-group mt-2">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control form-control-sm" name="password" id="InputPassword1" placeholder="Password">
<div class="error"></div>
<small id="emailHelp" class="form-text text-muted">We'll never share your Password with anyone else.</small>

</div>
<div class="form-group mt-3">
<button id="loginButton" class="w-100 btn btn-sm btn-lg btn-primary" type="submit">Login</button>
</div>
<div class="text-center mt-3 fw-bold">
<small class="text-body-primary"><a href ="signup.php">Forgot Password</a>.
</div>
<hr class="my-2">
<!-- <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
<div class=" mb-3">
<label> -->
<div class="text-center fs-6 fw-bold">
<small class="text-body-secondary"> I dont have an Account <a href ="signup.php">Signup</a>.
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
const form = document.getElementById('loginForm');
const email = document.getElementById('InputEmail1');
const password = document.getElementById('InputPassword1');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const formgroup = element.parentElement;
const errorDisplay = formgroup.querySelector('.error');
errorDisplay.innerText = message;
formgroup.classList.add('error');
formgroup.classList.remove('success');
}
const setSuccess = element => {
const formgroup = element.parentElement;
const errorDisplay = formgroup.querySelector('.error');
errorDisplay.innerText = '';
formgroup.classList.add('success');
formgroup.classList.remove('error');
}
const isValidEmail = email => {
const 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(String(email).toLowerCase());
}
const validateInputs = () => {
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
if(emailValue === ''){
setError(email, 'Email Address is required');
}else if (!isValidEmail(emailValue)){
setError(email, 'Provide a valid email address');
}else {
setSuccess(email);
}
if(passwordValue === ''){
setError(password, 'Password is required');
}else if (passwordValue.length < 8){
setError(password, 'Password must be at least 8 character.');
}else {
setSuccess(password);
}
const emailErrorMessage =document.getElementById('emailErrorMessage');
if (emailValue && email.classList.contains('success')) {
emailErrorMessage.innerText = '';
}else if (emailValue && email.classList.contains('error')) {
emailErrorMessage.innerText = 'Email|phone is not registered!';
}
}
</script>
</body>
</HTMl:5>
 
The issue is that the error message "Email|phone is not registered!" is not being displayed. This is because the error message is being set inside the validateInputs function, which is only called when the form is submitted. However, the error message should be displayed immediately when the email field loses focus.

To fix this issue, you can add an event listener to the email field that triggers the validateInputs function when the field loses focus. Here's how you can modify your code:

HTML: 
<input type="text" class="form-control form-control-sm" name="email" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email | Phone Number" onblur="validateInputs()">
<div class="error"></div>
<div class="error-message" id="emailErrorMessage"></div>

Add the onblur attribute to the email input field to call the validateInputs function when it loses focus.

Then, remove the event listener from the form submit event and only keep the function call to validateInputs inside the event listener for the email field.

JavaScript: 
const form = document.getElementById('loginForm');
const email = document.getElementById('InputEmail1');
const password = document.getElementById('InputPassword1');

const setError = (element, message) => {
    const formgroup = element.parentElement;
    const errorDisplay = formgroup.querySelector('.error');
    errorDisplay.innerText = message;
    formgroup.classList.add('error');
    formgroup.classList.remove('success');
}

const setSuccess = element => {
    const formgroup = element.parentElement;
    const errorDisplay = formgroup.querySelector('.error');
    errorDisplay.innerText = '';
    formgroup.classList.add('success');
    formgroup.classList.remove('error');
}

const isValidEmail = email => {
    const 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(String(email).toLowerCase());
}

const validateInputs = () => {
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();

    if(emailValue === ''){
        setError(email, 'Email Address is required');
    } else if (!isValidEmail(emailValue)){
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }

    if(passwordValue === ''){
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8){
        setError(password, 'Password must be at least 8 characters.');
    } else {
        setSuccess(password);
    }

    const emailErrorMessage = document.getElementById('emailErrorMessage');
    if (emailValue && email.classList.contains('success')) {
        emailErrorMessage.innerText = '';
    } else if (emailValue && email.classList.contains('error')) {
        emailErrorMessage.innerText = 'Email|phone is not registered!';
    }
}

By making these changes, the error message should now be displayed when the email field loses focus and the email is not registered.
 
🤖 said:
The issue is that the error message "Email|phone is not registered!" is not being displayed. This is because the error message is being set inside the validateInputs function, which is only called when the form is submitted. However, the error message should be displayed immediately when the email field loses focus.

To fix this issue, you can add an event listener to the email field that triggers the validateInputs function when the field loses focus. Here's how you can modify your code:

HTML: 
<input type="text" class="form-control form-control-sm" name="email" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email | Phone Number" onblur="validateInputs()">
<div class="error"></div>
<div class="error-message" id="emailErrorMessage"></div>

Add the onblur attribute to the email input field to call the validateInputs function when it loses focus.

Then, remove the event listener from the form submit event and only keep the function call to validateInputs inside the event listener for the email field.

JavaScript: 
const form = document.getElementById('loginForm');
const email = document.getElementById('InputEmail1');
const password = document.getElementById('InputPassword1');

const setError = (element, message) => {
    const formgroup = element.parentElement;
    const errorDisplay = formgroup.querySelector('.error');
    errorDisplay.innerText = message;
    formgroup.classList.add('error');
    formgroup.classList.remove('success');
}

const setSuccess = element => {
    const formgroup = element.parentElement;
    const errorDisplay = formgroup.querySelector('.error');
    errorDisplay.innerText = '';
    formgroup.classList.add('success');
    formgroup.classList.remove('error');
}

const isValidEmail = email => {
    const 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(String(email).toLowerCase());
}

const validateInputs = () => {
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();

    if(emailValue === ''){
        setError(email, 'Email Address is required');
    } else if (!isValidEmail(emailValue)){
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }

    if(passwordValue === ''){
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8){
        setError(password, 'Password must be at least 8 characters.');
    } else {
        setSuccess(password);
    }

    const emailErrorMessage = document.getElementById('emailErrorMessage');
    if (emailValue && email.classList.contains('success')) {
        emailErrorMessage.innerText = '';
    } else if (emailValue && email.classList.contains('error')) {
        emailErrorMessage.innerText = 'Email|phone is not registered!';
    }
}

By making these changes, the error message should now be displayed when the email field loses focus and the email is not registered.
Click to expand...
di na po nafufunction lahat nun tinanggal ko to "Then, remove the event listener from the form submit event and only keep the function call to validateInputs inside the event listener for the email field.
 
loktoy said:
di na po nafufunction lahat nun tinanggal ko to "Then, remove the event listener from the form submit event and only keep the function call to validateInputs inside the event listener for the email field.
Click to expand...
Apologies for the confusion. In that case, you can modify the code by keeping the event listener for form submit and removing the event listener for the email field. Here's how you can do it:

1. Remove the onblur attribute from the email input field:
HTML: 
<input type="text" class="form-control form-control-sm" name="email" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email | Phone Number">

2. Update
 
🤖 said:
Apologies for the confusion. In that case, you can modify the code by keeping the event listener for form submit and removing the event listener for the email field. Here's how you can do it:

1. Remove the onblur attribute from the email input field:
HTML: 
<input type="text" class="form-control form-control-sm" name="email" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email | Phone Number">

2. Update
Click to expand...
putol po
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 4
    Replies
  • 287
    Views
  • 2
    Participants
Last reply from:
loktoy

New Topics

Popular On This Forum

Online statistics

Members online
1,199
Guests online
5,412
Total visitors
6,611
Back
Top