We Keep Coding

Displaying pop up error message

I have a project where I need to enhance a given website. In the login page i have two fields (Username & password) and would like to display an error message in a pop up window if the user inputs wrong credentials.Was Thinking to do this in javascript The code i have till now is :
if (isset($errors) && !empty($errors)) {
echo '<p id="err_msg">Oops! There was a problem:<br>';
foreach ($errors as $msg) {
echo " - $msg<br>";
}
echo 'Please try again or Register</p>' ;
}

You don't need javascript for this. If you do the validation server side then you can guarantee the content is whats expected. You could use something like the following. Then set a timeout to hide the box if required.
<?php
$sError = '';
$sEmail = '';
// if email posted check/validate
if(isset($_POST['Email']) && $_POST['Email'] != ''){
if(valid_email($_POST['Email'])){
$sEmail = $_POST['Email'];
}else{
$sError .= "[InvalidEmail]";
}
}
// if email is blank after validation, add to error string
if($sEmail == '') $sError .= "[Email]";
// then print using php
if($sError !== ''){
if( strpos($sError, '[Email]') !== false ||
strpos($sError, '[Password]' ) !== false
){
echo"<div class=\"statusMessage alert alert-danger\" role=\"alert\"><ul>";
if(strpos($sError, '[Email]') !== false){
echo "<li>Please enter an email address</li>";
}
if(strpos($sError, '[InvalidEmail]') !== false){
echo "<li>Email provided is invalid</li>";
}
echo "</ul></div>";
}
}
?>

AJAX request posts on second submit

I was making a form to post data, combined with Ajax. Below is all code associated with it. The problem is that when filling the form in and submitting, on the first click it does the XHR request, and get's a success call back so changes the button to Done!.
But the results don't appear in the database. When clicking the submit button again, it does another XHR request that DOES get through. Any ideas what could cause this? Thanks!
// Method for updating the post in User.php
public function updatePost($id, $title, $content){
$query1 = $this->conn->prepare("UPDATE posts SET post_title=:post_title, post_content=:post_content WHERE post_id=:post_id");
$query1->bindparam(":post_title", $title);
$query1->bindparam(":post_content", $content);
$query1->bindparam(":post_id", $id);
try {
$query1->execute();
} catch (Exception $e) {
echo $e->getMessage();
}
} ?>
// Backend for the authenication and validation (where the form posts to)
<?php
session_start();
require_once("../User.php");
$login = new User();
$errors = [];
$post_title = $_POST['post-title'];
$post_content = $_POST['post-content'];
$post_id = $_POST['post-id'];
if( isset($post_title) && isset($post_content) && isset($post_id) ){
if( empty($post_title) ){
$errors[] = "The entered title is invalid in some way.";
}
elseif (empty($post_content)) {
$errors[] = "The entered content is invalid in some way.";
}
elseif(empty($post_id)){
$errors[] = "An internal error has occured, please contact the system administrator.";
}
else{
try {
if( !$login->updatePost($post_id, $post_title, $post_content) ){
echo "allrighty";
}
else{
echo "charliewegotaproblem";
}
} catch (Exception $e) {
echo $e->getMessage();
}
}
}
?>
// JS for the Ajax request itself
$("form").submit(function(evt){
evt .preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax(url, {
data: formData,
type: "POST",
success: function(response){
if(response == "allrighty"){
$(".update-submit").prop("value", "Done!")
}
else if (response == "charliewegotaproblem") {
$(".update-submit").prop("value", "Something went wrong...")
}
}
}); // Ajax OBJECT END;
});// Submit END

<?php
==> First return success message, if post update query has executed successfully in updatePost function
// Method for updating the post in User.php
public function updatePost($id, $title, $content){
$success = false; // Here I changed the code
$query1 = $this->conn->prepare("UPDATE posts SET post_title=:post_title, post_content=:post_content WHERE post_id=:post_id");
$query1->bindparam(":post_title", $title);
$query1->bindparam(":post_content", $content);
$query1->bindparam(":post_id", $id);
try {
$query1->execute();
if($query1){ $success = true; } // Here I changed the code
} catch (Exception $e) {
echo $e->getMessage();
}
return $success;
}
==> Now here if $login has return true than an only than "allrighty" will return
// Backend for the authenication and validation (where the form posts to)
session_start();
require_once("../User.php");
$login = new User();
$errors = [];
$post_title = $_POST['post-title'];
$post_content = $_POST['post-content'];
$post_id = $_POST['post-id'];
if( isset($post_title) && isset($post_content) && isset($post_id) ){
if( empty($post_title) ){
$errors[] = "The entered title is invalid in some way.";
}
elseif (empty($post_content)) {
$errors[] = "The entered content is invalid in some way.";
}
elseif(empty($post_id)){
$errors[] = "An internal error has occured, please contact the system administrator.";
}
else{
try {
if($login->updatePost($post_id, $post_title, $post_content)){ // Here I changed the code
echo "allrighty";
}
else{
echo "charliewegotaproblem";
}
} catch (Exception $e) {
echo $e->getMessage();
}
}
}
?>

Broke my javascript with if else

I feel like I'm missing something really simple, so I've decided to get over my stubbornness and actually ask a question here instead of wasting any more time.
I've started making my personal blog from scratch (for the personal challenge and learning experience of it) not too long ago and I'm currently on writing the code for email validation; the standard send email with token & email GET variables. It works properly (hooray), but there's one problem that was introduced when I decided to add email validation to the back end. The ajax call is still successful and returns the right string; however, once I added an else if statement to my javascript to handle showing error messages for invalid email that gets (or is forced) through, it seems to act as though there isn't a curly bracket--my success boolean which determines the success/failure of my alert is set to false and the string displayed to the user is also not as I intended. Here's my code and a screenshot to illustrate:
*I changed the if..else to a switch to see if it would change anything--it didn't.
//JAVASCRIPT
$("form").submit(function(event) {
if(request) request.abort;
var message = "";
var success = false;
var formMessageBox = document.getElementById("form-message");
var form = $(this);
var inputs = form.find("input");
var data = inputs.serialize();
inputs.prop("disabled", true);
request = $.ajax({
url: "php/form.php",
type: "post",
data: data
});
request.done(function(data) {
var submission = data;
switch (submission) {
case "success":
message = "You're good to go! You'll be receiving an email shortly from <strong>my_email</strong>, just to make sure everything's in the green";
$("form").innerHTML = "";
success = true;
break;
case "fail":
message = "Seems this email is already in my database; you may have submitted twice, or somebody might have hijacked your email--don't worry, it's more than likely the former.";
success = false;
break;
default:
message = submission;
success = false;
break;
}
});
request.always(function() {
inputs.prop("disabled", false);
if(success) {
formMessageBox.classList.add("alert-success");
if (formMessageBox.classList.contains("alert-danger")) formMessageBox.classList.remove("alert-danger");
}
else {
formMessageBox.classList.add("alert-danger");
if (formMessageBox.classList.contains("alert-success")) formMessageBox.classList.remove("alert-success");
}
formMessageBox.innerHTML = message;
});
event.preventDefault();
})
//PHP
<?php
if(!$_POST["email"]) {
echo "Please enter an email address";
exit(0);
}
if($_POST["email"] AND !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
echo "Please enter a valid email address";
exit(0);
}
$dbconn = mysqli_connect("localhost","username", "password", "db");
if (mysqli_connect_error()) die("There seems to be something wrong. Sorry, try again later");
require_once('CryptoLib.php');
$token = CryptoLib::randomString(16);
$name = isset($_POST['name']) ? $_POST['name'] : "user";
$email = $_POST['email'];
$emailTo="$email";
$subject="Web Devs' Corner Verification";
$body="http://www.allen-mcintoshii.com/webdevscorner/php/verify.php?conf-token=".$token."&email=".$email;
$headers="From: my_email";
$query = "INSERT INTO `users` (`name`, `email`, `conf_token`) VALUES ('$name', '$email', '$token')";
$result = mysqli_query($dbconn, $query);
if ($result AND mail($emailTo, $subject, $body, $headers)) echo "success";
else echo "fail"; ?>
My 'successful error'
To be honest, it's not all that critical, but it definitely is not what I intend to happen, so why not use this little quirk as a chance to learn something? Thanks in advance to everyone who decides to help me out.

Well, while I was trying to do something similar for another small project, I actually found my own soloution. I'll just leave it here in case anyone finds themselves in a similar predicament.
//PHP
<?php
session_start();
$errors = array();
$errors[] = "You have been successfully signed up! Welcome to your diary!";
$min_chars = 8;
$email = $_POST['email'];
$password = $_POST['password'];
if (!$email) {
$errors[] = "Please enter an email address.";
}
if ($email AND !filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "Please enter a valid email address";
}
if (!$password) {
$errors[] = "Please enter a password.";
}
else {
if (strlen($password) < $min_chars) $errors[] = "Your password must be at least $min_chars characters";
if (!preg_match('`[A-Z]`', $password)) $errors[] = "Your password is required to have at least on capital letter";
}
if (!$errors[1]) {
$dbconn = mysqli_connect(args) //just hiding what needs to be hidden here;
if (mysqli_connect_error()) die("There seems to be something wrong. Sorry, try again later");
$query = "SELECT * FROM users WHERE `email` ='".mysqli_real_escape_string($dbconn, $email)."'";
$results = mysqli_num_rows(mysqli_query($dbconn, $query));
if ($results != 0) $errors[] = "We're sorry, that email is already in our database, did you mean to log in?";
else {
$query = "INSERT INTO `users` (`email`, `password`) VALUES ('".mysqli_real_escape_string($dbconn, $email)."', '".password."')";
$result = mysqli_query($dbconn, $query);
$_SESSION['id'] = mysqli_insert_id($dbconn);
}
}
if ($errors[1]) session_destroy();
echo json_encode($errors);
?>
//Javascript
$(document).ready(function() {
var msgBox = $("#message-box");
$("#signup").submit(function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.post("signup.php", formData, function(data) {
var success = data.length == 1 ? true : null,
numErrors = data.length,
errors = "";
if (success != null) {
msgBox.addClass("alert-success");
msgBox.removeClass("alert-danger");
msgBox.html(data[0]);
}
else {
msgBox.addClass("alert-danger");
msgBox.removeClass("alert-success");
var i;
for (i = 1; i < numErrors; i++) {
errors = errors + "<li>" + data[i] + "</li>";
}
msgBox.html("<ul>" + errors + "</ul>");
}
}, "json")
})
$("#login").submit(function(e) {
$.post()
})
})
Instead of trying to return different strings in the event of pass/fail, I decided to let PHP return one JSON object at the end no matter what. By placing the success message at the very top and pushing any error messages as the code moves along, it becomes way easier to just check if the return data's length is only 1 or greater. If it's 1, there were no errors and everything went fine; else, a for loop iterates through all the returned messages starting from the second one, effectively printing out all errors occurred. I hope this helps anybody who found themselves in a similar bind

JQuery not working after null ajax responce

I have Jquery code
$(document).ready(function(){
$('#login').click(
function () {
$.post('/profile/ajax/login', {
username: $('#username').val(),
password: $('#password').val(),
},
function (res) {
if (res != null) {
$.each(res, function (i, val) {
$('#login-error').html('<div class="alert alert-danger fade in"><a class="close" data-dismiss="alert" href="#">×</a>' + val + '!</div>');
return false;
});
} else {
location.reload();
}
},
'json'
);
}
);
}
And have PHP code
if($_POST)
{
$username = $_POST['username'];
$password = $_POST['password'];
$post = Validation::factory($_POST);
$post->rule('username', 'not_empty');
$post->rule('password', 'not_empty');
if($post->check())
{
if(!Auth::instance()->login($username, $password, true))
{
echo json_encode(array('Неверный Логин или Пароль'));
}
}
else
{
$errors = $post->errors('validation');
echo json_encode($errors);
}
}
If Ajax return some text with errors (res != null) - Jquery work normally.
If Ajax returned without any information nothing happens in "else" block.
How I can solve this problem?

The datatype you specified is json and so if the return value is null then it wont be processed. Try changing the datatype or echo an error in json format in your php file :)

The check res != null is the problem. An empty array can't be compared to null.
Change the condition to check the array length:
if (res.length > 0) {
Secondly if the submitted credentials are in valid format and are correct, the PHP returns nothing. This will cause the jQuery error handler to fire instead of success because a blank response can't be parsed as JSON. Add another else clause that returns an empty array:
if(!Auth::instance()->login($username, $password, true)){
echo json_encode(array('Неверный Логин или Пароль'));
} else {
echo json_encode(array());
}

Try changing your PHP code to :
$result = null;
if($_POST)
{
$username = $_POST['username'];
$password = $_POST['password'];
$post = Validation::factory($_POST);
$post->rule('username', 'not_empty');
$post->rule('password', 'not_empty');
if($post->check())
{
if(!Auth::instance()->login($username, $password, true))
{
$result = array('Неверный Логин или Пароль');
}
}
else
{
$result = $post->errors('validation');
}
}
echo json_encode($result);
This would result in your result being json encoded in all possible cases.

AJAX not returning a variable from php

I know there is a few questions like this on here. but I have done a lot of researching and bug fixing all day to try work out why my ajax does not return a response from the php file. All I want is for it to tell me a user has been registered so I can let the user move on with the signing up process. And I just need someones wise guidance to tell me what I am doing wrong!!
so I wont bore you with the validation part of the js file just the ajax
if(ValidationComplete == true){
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(register, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url:url,
type:type,
data: data,
dataType: 'json',
success: function(result){
alert(result.status);
console.log(result.data);
},
error: function(xhr, textStatus, error){
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
});
return false;
} else {
return false;
}
currently with this, if I remove the dataType bit the alert bit happens but currently with it there nothing does.
again I will just skip to the chase on the php file
$query = "INSERT INTO person
VALUES('','$first_Name','$surname','$email','$dob','$password',
'1','','0','1','','','','$emailCode')";
if($query_run =mysql_query($query)) {
echo json_encode(array("response"='true'));
Any help would be amazing!!!!!
updated code:
<?php
if( isset($_POST['firstname']) &&
isset($_POST['surname']) &&
isset($_POST['email']) &&
isset($_POST['day']) &&
isset($_POST['month']) &&
isset($_POST['year']) &&
isset($_POST['password']) &&
isset($_POST['re_type_password'])){
$first_Name = $_POST['firstname'];
$surname = $_POST['surname'];
$email = $_POST['email'];
$password = $_POST['password'];
$day = $_POST['day'];
$month = $_POST['month'];
$year = $_POST['year'];
$re_type_password = $_POST['re_type_password'];
$emailCode = md5($_POST['$first_Name'] + microtime());
if(!empty($first_Name)&&
!empty($surname)&&
!empty($email)&&
!empty($day) &&
!empty($month) &&
!empty($year) &&
!empty($password)&&
!empty($re_type_password)){
if(strlen($firstname)>30 || strlen($surname)>30 || strlen($email)>50){
echo 'the data enetered is to long';
} else {
if($password != $re_type_password){
echo 'passwords do not match, please try again.';
} else{
$query = "SELECT email FROM person WHERE email ='$email'";
$query_run = mysql_query($query);
if(mysql_num_rows($query_run)==1){
echo 'Email address already on databse';
} else{
if($day>31 || $month>12){
echo 'date of birth wrong';
} else{
$dob= $year.'-'.$day.'-'.$month;
$query = "INSERT INTO person
VALUES('','$first_Name','$surname','$email','$dob','$password'
,'1','','0','1','','','','$emailCode')";
if($query_run =mysql_query($query)) {
email($email, 'Email Confirmation', "hello ". $first_Name." ,
\n\n you need to activate your account so click the link ");
$return_data['status'] = 'success';
echo json_encode($return_data);
} else {
echo #mysql_error();
}
}
}
}
}
} else {
echo "<p id='error'> All fields are required. Please try again.</p>";
}
}
?>
<?php
} else if (loggedIn()) {
echo 'you are already registed and logged in';
}
?>
</body>
</html>

the last line it should be
echo json_encode(array("response"=>'true'));
see the added > in the array declaration, that is used to assign arrays with keys.
also in general you should put a error capture in your ajax statement, see this answer for more info
EDIT: Ok wow, that's some spaghetti code you have there, but after a little clean-up your problem is too many closing braces } you have to remove the } just before the following line also get rid of the closing and opening tags around this line, they serve no use.
} // <------- THIS ONE!
} else if (loggedIn()) {
echo 'you are already registed and logged in';
}
I should also mention two other issues with your code
You are accepting input from the user without cleaning it up and testing it properly. This is no no read here to find out more
You are using mysl_ functions, these are old and depreciated they are also security risks. Check out PDO instead
EDIT:
Add ini_set('error_reporting',1); to the top of your php script.