The Goal:
Step 1: A form opens in a JQuery Dialog. User Enters the username and Password, Clicks on Login.
Step 2: Ajax Sends the data to a server side script , in my case loginproc.php.
Step 3:Validate the login using loginproc. If the login is successful the user is redireted to a page.
Step 4: Else a message is send back to the dialog and it is appended in the dialog itself along with a shake effect.
As of now step one and three works fine if I use '$("#admin-form").sumbit();' just before closing the dialog. I am not sure as to how can I set the invalid login text in the diolog.
Code:
$(function() {
var name = $("#name"),
password = $("#password"),
allFields = $([]).add(name).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
$("#login-form").dialog({
autoOpen: false,
/* height: 300, */
width: 450,
show: {
effect: "explode",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
modal: true,
buttons: {
"Login": function() {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(password, "password", 5, 32);
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z_])+$/, "Password field only allow : a-z 0-9");
if (bValid) {
$("#admin_login").submit();
$(this).dialog("close");
}
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
// Link to open the dialog
$("#admin-link").click(function(event) {
$("#login-form").dialog("open");
event.preventDefault();
});
});
This is the section of the code in which I need to make some changes.
if (bValid) {
$("#admin_login").submit();
$(this).dialog("close");
}
Kindly help me figure this out
UPDATE: The Form:
<form method="post" action="class/loginproc.php" id="admin_login">
<fieldset>
<label for="name">Username</label>
<input type="text" name="user" id="name" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="pass" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
Loginproc.php
<?php
require_once 'utils.php';
if (is_null($_POST['user']) || is_null($_POST['pass'])) {
utils::redirect_url("../index.php");
} else {
$utils = new utils();
$username = $_POST['user'];
$password = $_POST['pass'];
$type = 'admin';
$response = $utils->validate_user($username, $password, $type);
if ($response == true) {
return true;
/*
$utils->login_redirect($type); */
} else {
return false;
/* $_SESSION['valid'] = false;
utils::redirect_url("../index.php"); */
}
}
?>
The Jquery:
if (bValid) {
var data = $('#admin_login').serialize();
$.ajax({
url: "class/loginproc.php",
type: "post",
data: data,
dataType: "json",
success: function(data) {
if (data.success) {
window.location = "../admin.php";
}
else {
alert('Invalid Login');
}
}
});
$(this).dialog("close");
}
Solution:
Thanks to 'Mohammad Adil' , I was able to figure this out. I had to change his provided solution a bit to get the appropriate result. Thus I am posting it here for future reference.
JQUERY
if (bValid) {
var data = $('#admin_login').serialize();
$.ajax({
url: "class/loginproc.php",
type: "post",
data: data,
dataType: "json",
success: function(data) {
window.location = "admin.php";
},
error: function(data) {
alert('invalid');
}
});
$(this).dialog("close");
}
Loginproc:
$response = $utils->validate_user($username, $password, $type);
if ($response == true) {
echo true;
} else {
echo false;
}
Regards
Genocide_Hoax
if (bValid) {
var data = $('#admin_login').serialize();
$.ajax({
url:"loginproc.php",
type: "post",
data : data,
dataType:"text",
success:function(data){
if(data == "true"){
window.location = "some location";
}
else{
// LOGIN FAILED
}
}
});
$(this).dialog("close");
}
You put method and action in the form, I think this should be omitted if working with Ajax because if not omitted, data will not be sent asynchronous.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With