Prevent form submit

Question

I would like to set a js var to true but ONLY if the login data is correct, NOT IF the form is valid(fields empty .. ) how can i do that? I'm using the jQuery validation plugin and i modified the submitHandler, so that the form is only submitting, if flag is true.

var flag = false;

$('#login-form').validate(
{
    rules:
    {
        User: "required",
        Password: "required"
    },
    messages:
    {
        User: "Please enter a Username!<br />",
        Password: "Please enter a Password!",
    },
    submitHandler: function(form)
    {
        if(flag)
        {
            var message = document.createElement("div");
            message.id = "info";
            message.style.width = "250px";
            message.style.height = "25px";
            message.style.color = "green";
            message.innerHTML = '<p style="text-align: center;">Your Login Data is correct!.</p>';

            $("#login-form").after(message);
            form.submit();
        }
    },
});

Here's php part, where i would like to set flag to true, if the login data is correct, else it should stay as it is but how can i set flag now?

if(!empty($result))
{        
    **Here i want to set the Flag!!
    $flag = true; ??****

    $_SESSION["loggedin"] = $user;
    header ("Location: index.php?site=backend"); 
    exit;
}
else
{
    echo '<p style="text-align: center; color: red">The username or password is wrong!</p>';
    header ("Refresh:2; url=index.php?site=backend-login"); 
    exit;
}

or is there any better way to do it? I just would like to not always have the form reloaded, because it's a self-submitting form. After that i would also like to show an information message. So, how can i set or change the existing value of var test?

possible duplicate of [jquery validation: prevent form submit](http://stackoverflow.com/questions/10305938/jquery-validation-prevent-form-submit) — , Mar 30 '15 at 09:21
Please check this http://www.websitecodetutorials.com/code/jquery-plugins/jquery-validation.php — CodeWithCoffee, Mar 30 '15 at 09:25
that's not what i want. I explained it a bit more detailed above now. — Procos, Mar 30 '15 at 10:05

Rahul Desai · Answer 1 · 2015-03-30T11:41:54.110

Just do:

var flag = $('#login-form').valid();

.. you will get the boolean value in flag.

Read up: .valid() | jQuery Validation Plugin

PS. It is better to use HTML element in the jQuery selector so it works faster.

form#login-form

EDIT:

Working code snippet:

var flag = false;

$('#login-form').validate(
  {
    rules:
    {
      User: "required",
      Password: "required"
    },
    messages:
    {
      User: "Please enter a Username!<br />",
      Password: "Please enter a Password!",
    },
    submitHandler: function(form)
    {
      var flag = $('#login-form').valid();
      if(flag)
      {
        var message = document.createElement("div");
        message.id = "info";
        message.style.width = "250px";
        message.style.height = "25px";
        message.style.color = "green";
        message.innerHTML = '<p style="text-align: center;">Your Login Data is correct!.</p>';

        $("#login-form").after(message);
        form.submit();
      }
    },
  });

input, label{
  display: block;
  margin: 10px;
  font-family: Arial;
}

label.error{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>

<form id="login-form">
  <input type="text" id="User" name="User" />
  <input type="password" id="Password" name="Password" />
  <input type="submit" value="Login"/>
</form>

EDIT 2:

In response to the comments, I highly recommend using AJAX for this. With AJAX, first check if the user exists and then set appropriate value to flag and pass it to Javascript and then go ahead with it.

Read up: jQuery.ajax() | jQuery API Documentation.

This is the most appropriate way of passing data from JS to PHP and the other way round.

That's not what i want. If i do that my form is valid, when the fields are not empty, but i would like to set the flag, when my login data is correct. I would also like to change the value in php, like shown above. — Procos, Mar 30 '15 at 09:41
@Procos That is incorrect. The form doesnt get submitted if you have those rules and use my line of code. Please check the EDIT in my answer above, it has a working demo of the same. And I dont really understand why you need to set the flag in PHP if you can do it in Javascript. Keep it simple. :) — Rahul Desai, Mar 30 '15 at 10:56
It seems like you don't understand what i mean. The form validation itself already worked but i would like to ONLY submit the form, if a user is found and if the login is successfull. I would like to set the flag to true then and only then. I've want to to set it in the if(!empty($result)) case — Procos, Mar 30 '15 at 11:03

score 0 · Answer 2 · answered Mar 30 '15 at 11:03

In your PHP file you ll need to output some javascript code like this

// PHP file where your checks are making flag = true
echo '<script type="text/javascript"> var flag = true; </script>';

and

// PHP file where your checks are making flag = false
echo '<script type="text/javascript"> var flag = false; </script>';

then DO NOT re-assign value to your flag with your javascript. remove the var flag = false; from your javascript.

Be careful, the PHP must echo BEFORE your js code (so your flag will take a value first then your js will work with it).

i believe this is a mistake – argentum47 Mar 30 '15 at 11:15 — argentum47, Mar 30 '15 at 11:15

Prevent form submit

2 Answers2