CODEWITHSUNDEEP
phpjqueryformsvalidation
Dirty Bird Design
Dirty Bird Design

Reputation: 5533

Trigger jquery validation plug in error with PHP

I would like my server side PHP validation on a log in page to trigger an error in the client side jquery validation plug in validation. With non log in forms - structured to use a remote file as an action I just echo back a msg then trigger the client side validation error/success msg based on that returned value. I received some suggestions here before, but they did not work - some syntax errors (or my ignorance) here's some pseudocode:

<?php
$username = "foo";
$password = "bar";
if ($_POST['username'] != $username || $_POST['password'] != $password) {
#would like to trigger the #errormsg here
?>
<!DOCTYPE>
<html>
<head></head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" >
</body>
</html>
<?php
}
else {
?>
<!DOCTYPE>
<html>
<head></head>
<body>Logged in user sees this content</body>
</html>
<?php
}
?>

In my validation script the following:

//beginning
success: function(data) {
if (data=="Error") {
$("#Error").html('ERROR MSG HERE').show();
} else {
$("#Success").html('SUCCESS MSG HERE').show();
}
//rules, msgs etc

Currently if a user enters the wrong un/pwd it just resets the form, I'd like to tell them the info they entered was wrong. I know PHP can output JS - trying to just do something like in the PHP - but wherever I put that I get some syntax erros due to how the sections are broke up btwn the "} else {:

<?php
$username = "foo";
$password = "bar";
if ($_POST['username'] != $username || $_POST['password'] != $password) {
<script>
   $(document).ready(function() {
      $("#Error").html('ERROR MSG HERE').show();
   });
</script>
?>

thanks!

Upvotes: 0

Views: 324

Answers (2)

Brian Glaz
Brian Glaz

Reputation: 15666

You just need to move your PHP output to the correct section. You can't put a <script> element into your HTML page before you even have a doctype or <html> tag. It has to go inside the <head> or <body> section.

<?php
$username = "foo";
$password = "bar";

if(!empty($_POST) && $_POST['username'] == $username && $_POST['password'] == $password) {

#display 'LOGGED IN' page here

} else {

   if(!empty($_POST) && ($_POST['username'] != $username || $_POST['password'] != $password)) {
    //Put the javascript error alert here
   }

  //Put the log in form here
}

Upvotes: 1

vallabh joshi
vallabh joshi

Reputation: 143

I think you should go with Ajax Form Submission and server side data validation. This is the proper way to do it find example below.

HTML FILE

<html>
<head>
    <script type="text/javscript" src="latest-jquery.js"></script>
    <script type="text/javscript">

        $(function(){

            $('#login-form').submit(function(){

                $form = $(this);
                $message = $form.find('.message');

                $.post($form.attr('action'), $form.serialize(), function(data){

                    if( data.error ) {

                        $message.html( data.message ).removeClass('success').addClass('error');

                    } else if( data.success ) {

                        $message.html( data.message ).removeClass('error').addClass('success');

                    }

                }, 'json');

                return false;
            });

        });

    </script>
</head>
<body>
    <form id="login-form" action="PATH_TO_PHP_FILE" method="post">
        <div class="message"></div>
        <input type="text" name="username" />
        <input type="password" name="password" />
        <input type="submit" value="Login Now !" />
    </form>
</body>

PHP FILE

<?php
$username = 'foo';
$password = 'bar';

$response = array('error' => TRUE, 'message' => "Invalid Credentials");

if ( count($_POST['username']) && isset($_POST['username']) && isset($_POST['password']) && $_POST['username'] == $username && $_POST['password'] == $password  ) {

    $response = array('error' => FALSE, 'success' => TRUE, 'message' => "Bingo you have done it !");

}

print json_encode($response); //PHP function to convert array to JSON
exit; //To resolve IE Bug
?>

as per my knowledge this is the proper way.

Upvotes: 0

Related Questions