disable form submit button when password does not match - php

I'm trying to figure out where I'm supposed to include a js code where I disable the form submit button when the passwords don't match.
html:
<form name=passform class="form-horizontal-signup" method="post" action="login.php" >
<fieldset>
<legend>Sign Up for MyVibes</legend>
<input type="password" class="input-xlarge" placeholder="Password" name="password" id="password" onKeyUp="verify.check()" />
<input type="password" class="input-xlarge" placeholder="Retype Password" name="repassword" id="repassword" onKeyUp="verify.check()"/></fieldset>
<div id="password_result"> </div><br />
<button type="submit" input name="btnSignUp" id="btnSignUp" class="btn btn-inverse" disabled="disabled"/>Sign Up</button>
</form>
</div>
getting the variables:
<SCRIPT TYPE="text/javascript">
verify = new verifynotify();
verify.field1 = document.passform.password;
verify.field2 = document.passform.repassword;
verify.result_id = "password_result";
verify.match_html = "Passwords match.";
verify.nomatch_html = "Please make sure your passwords match.";
// Update the result message
verify.check();
//
</SCRIPT>
and the function:
function verifynotify(field1, field2, result_id, match_html, nomatch_html) {
this.field1 = field1;
this.field2 = field2;
this.result_id = result_id;
this.match_html = match_html;
this.nomatch_html = nomatch_html;
this.check = function() {
// Make sure we don't cause an error
// for browsers that do not support getElementById
if (!this.result_id) { return false; }
if (!document.getElementById){ return false; }
r = document.getElementById(this.result_id);
if (!r){ return false; }
if (this.field1.value != "" && this.field1.value == this.field2.value) {
r.innerHTML = this.match_html;
$("#btnSignUp").prop("disabled", false);
} else {
r.innerHTML = this.nomatch_html;
$("#btnSignUp").prop("disabled", true);
}
}
}
maybe i misplace where i'm supposed to put the $("#btnSignUp").prop("disabled", true); code?

Try
$("#btnSignUp").attr("disabled", "disabled");

this should works..
if (this.field1.value != "" && this.field1.value == this.field2.value) {
r.innerHTML = this.match_html;
$("#btnSignUp").removeAttr("disabled");
} else {
r.innerHTML = this.nomatch_html;
$("#btnSignUp").attr("disabled", "disabled");
}

Related

form data saved in localstorage and post to php

I am working on a simple login form for a mobile site that will save the form data in local storage but will also post data to a php file for url redirection with appended form data. I need help as the storage is working but the post for this is not.
Html
<form class="form-signin" action="siteurl/processing/login-app.php" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Eventname" id='eventname'>
<input type="text" class="input-block-level" placeholder="Username" id='username'>
<input type="password" class="input-block-level" placeholder="Password" id="password">
<label class="checkbox">
<input type="checkbox" value="remember-me" id="remember_me"> Remember me
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>
Now the script
<script>
$(function() {
if (localStorage.chkbx && localStorage.chkbx != '') {
$('#remember_me').attr('checked', 'checked');
$('#username').val(localStorage.usrname);
$('#pass').val(localStorage.pass);
} else {
$('#remember_me').removeAttr('checked');
$('#username').val('');
$('#pass').val('');
}
$('#remember_me').click(function() {
if ($('#remember_me').is(':checked')) {
// save username and password
localStorage.usrname = $('#username').val();
localStorage.pass = $('#pass').val();
localStorage.chkbx = $('#remember_me').val();
} else {
localStorage.usrname = '';
localStorage.pass = '';
localStorage.chkbx = '';
}
});
});
</script>
And the php
<?php
if (isset($_POST["eventname"]) && isset($_POST["username"]) && isset($_POST["password"])) {
$eventname = $_POST["eventname"];
$username = $_POST["username"];
$password = $_POST["password"];
$url = "siteurl/index.php/$eventname?user=$username&passw=$password";
header( "Location: $url" ) ;
} else {
echo "Username and Password not found";
}
?>
What am I missing?
Your POST variables work off the input names, not ids.
Add a name attribute to your inputs and access them.

php form action and jquery validation executing at once

My jquery validation and php form are both executing at once, means the validations errors are showing and also the php action is executed. here is the complete code. The jquery form submit function is returning false if the there are errors in form but even thought the form getting executed..
<form class="form-3 form-horizontal ajxfrm " id="step-three" enctype="multipart/form-data" action="<?php echo $html->addLink(array('controller'=>'homes','action'=>'step_three')); ?>" method="post" target="_parent">
<div id="calendar">
<div class="clear"></div>
<div class="control-group">
<div class="control-label">Name<span>*</span></div>
<div class="controls"><input type="text" name="name" id="name" />
<span id="nameInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Email<span>*</span></div>
<div class="controls"><input type="text" name="email" id="email" />
<span id="emailInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Contact<span>*</span></div>
<div class="controls"><input type="text" name="contact" id="contact" />
<span id="contactInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Skype Id<span>*</span></div>
<div class="controls"><input type="text" name="skypeid" id="skype" />
<span id="skypeInfo"></span></div>
</div>
<div style="position:relative">
<div class="control-group">
<div class="control-label">Files<br/><span style="font-size:10px; font-style:italic">(Optional)</span></div>
<div class="controls">
<input id="fileupload" type="file" name="fileupload[]" multiple/>
<span id="fileInfo"></span><br/>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">Your Message<span>*</span></div>
<div class="controls"><textarea rows="3" name="message" id="message"></textarea>
<span id="messageInfo"></span></div>
</div>
<div class="clear"></div>
</div>
<div id="submit" style=" text-align:right;">
<input type="hidden" name="post" value="1"/>
<input type="submit" class="btn green" value="Next" id="step3submit" style="margin-right:-20%; margin-top:5%"/>
</div>
</form>
Here is the jquery file
$(document).ready(function () {
//global vars
var form = $("#step-three");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var contact = $("#contact");
var contactInfo = $("#contactInfo");
var skype = $("#skype");
var skypeInfo = $("#skypeInfo");
var message = $("#message");
//On blur
name.blur(validateName);
email.blur(validateEmail);
contact.blur(validateContact);
skype.blur(validateSkype);
message.blur(validateMessage);
//On key press
name.keyup(validateName);
email.keyup(validateEmail);
contact.keyup(validateContact);
skype.keyup(validateSkype);
message.keyup(validateMessage);
//On Submitting
form.submit(function () {
if (validateName() & validateEmail() & validateContact() & validateSkype() & validateMessage())
return true;
else
return false;
});
//validation functions
function validateEmail() {
//testing regular expression
var a = $("#email").val();
var filter = /^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
//if it's valid email
if (email.val().length == 0) {
email.addClass("error");
emailInfo.text("Required");
emailInfo.addClass("error");
return false;
} else if (filter.test(a)) {
email.removeClass("error");
emailInfo.text("");
emailInfo.removeClass("error");
return true;
}
//if it's NOT valid
else if (!filter.test(a)) {
email.addClass("error");
emailInfo.text("Valid Email Please");
emailInfo.addClass("error");
return false;
}
}
function validateName() {
//if it's NOT valid
if (name.val().length == 0) {
name.addClass("error");
nameInfo.text("Required");
nameInfo.addClass("error");
return false;
}
//if it's valid
else {
name.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
function validateContact() {
//if it's NOT valid
if (contact.val().length == 0) {
contact.addClass("error");
contactInfo.text("Required");
contactInfo.addClass("error");
return false;
}
//if it's valid
else {
contact.removeClass("error");
contactInfo.text("");
contactInfo.removeClass("error");
return true;
}
}
function validateSkype() {
//if it's NOT valid
if (skype.val().length == 0) {
skype.addClass("error");
skypeInfo.text("Required");
skypeInfo.addClass("error");
return false;
}
//if it's valid
else {
skype.removeClass("error");
skypeInfo.text("");
skypeInfo.removeClass("error");
return true;
}
}
/* function validatePass1(){
var a = $("#password1");
var b = $("#password2");
//it's NOT valid
if(pass1.val().length <5){
pass1.addClass("error");
pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
pass1Info.addClass("error");
return false;
}
//it's valid
else{
pass1.removeClass("error");
pass1Info.text("At least 5 characters: letters, numbers and '_'");
pass1Info.removeClass("error");
validatePass2();
return true;
}
}
function validatePass2(){
var a = $("#password1");
var b = $("#password2");
//are NOT valid
if( pass1.val() != pass2.val() ){
pass2.addClass("error");
pass2Info.text("Passwords doesn't match!");
pass2Info.addClass("error");
return false;
}
//are valid
else{
pass2.removeClass("error");
pass2Info.text("Confirm password");
pass2Info.removeClass("error");
return true;
}
}*/
function validateMessage() {
//it's NOT valid
if (message.val().length < 10) {
message.addClass("error");
messageInfo.text("More than 10 Characters required");
messageInfo.addClass("error");
return false;
}
if (message.val().length == 0) {
message.addClass("error");
messageInfo.text("Required");
messageInfo.addClass("error");
return false;
}
//it's valid
else {
message.removeClass("error");
messageInfo.text("");
messageInfo.removeClass("error");
return true;
}
}
});
You have to use preventDefault() function. The submit function can't be 'canceled' with returning false. it is an event and there are many handlers 'listening' to it. You have to stop the event from propagating, thus preventing the handlers to handle the event ;)
The code:
$("form").submit(function(e){
if(!(validateName() && validateEmail() && validateContact() && validateSkype() && validateMessage())){
e.preventDefault();
// and maybe some alert() with fail info
}
else{
//whatever you need if validation suceeds
}
});
use && place of &
I hope it will help

Why is this jQuery function not communicating properly with my php file?

Let me show you what I have:
(1) Form:
<form name="login-form" class="login-form" method="post" onSubmit="login()">
<div class="header">
<h1>Sign In</h1>
</div>
<div class="content">
<input type="hidden" name="siteToken" value="$token" />
<input id="username" name="username" type="text" class="input username" placeholder="Username" required="required" />
<div class="user-icon"></div>
<input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
</div>
</form>
(2) jQuery Function:
$(document).ready(function login() {
$('.login-form').submit(function() {
var formData = $(this).serialize();
$("input").prop("disabled", true);
$.post('VRC_LoginProcess.php', formData, loginMessage);
function loginMessage(data) {
$('.header').append(data);
};
});
});
(3) PHP Function:
<?php
require_once('VRC_Header.php');
require_once('../Classes/VRC_MasterOO.php');
require_once('../Classes/VRC_Secure_Login.php');
//*******************************//
//Declerations
$signIn = "";
$username = "";
$password = "";
$success = "";
$error = "";
//******************************//
//****************************************************************************************//
//Script Header
$signIn = new UserService($dbuser, $dbpass, $dbhost, $dbname); //Create new class instance
$signIn->sec_session_start(); //Begin session
//***************************************************************************************//
//***************************************************************************************//
//Begin Login Functions
if(isset($_POST['username'], $_POST['password'])) {
//Assign POST submissions to passable php variables
$username = $_POST['username'];
$password = $_POST['password'];
$passedToken = $_POST['siteToken'];
/*//Check Token Values (prevent CSRF attacks)
if($passedToken != $_SESSION['token']) {
$error = "CSRF attack detected. Please close your browser and try again.";
$signIn->csrfAttackLog($username);
echo $error;
exit();
}*/
//Test if both fields are not null
if($username == "" || $password == "")
{
$error = "Not all fields were entered<br />";
echo $error;
exit();
}
//Start login process
else
{
$success = $signIn->login($username, $password);
if ($success === true)
{ //Login Successful
echo "Success!"; //Direct to main page.
exit();
}
//Specific login failure determination
else
{
switch ($success){
case 1:
$error = "Your account has been locked.";
echo $error;
break;
case 2:
$error = "Invalid Username/Password (2)";
echo $error;
break;
case 3:
$error = "Invalid Username/Password";
echo $error;
break;
case 4:
$error = "Invalid Username/Password (3)";
echo $error;
break;
}
}
}
}
?>
Fist off, I doubt the problem is in the PHP function. I've tested it before implementing jQuery calls (I used it directly in the html action attribute). My suspicion is that the problem is occurring in the jQuery function (I just started using jQuery and am not really familiar with it).
Note that I have removed the token input for the time being in the php file. I simply want to get it working before I deal with that (there is another problem with that part).
I don't believe that the post variables are being sent to the php file correctly. Also, I don't believe my jQuery function as it is is properly receiving the echo response from my php function either, in the sense that it will display it as html - provided that it worked to begin with.
Any input is appreciated.
$(document).ready(function login() {
That line is the problem.
Probably the login function is not available to rest of the page. It's just a name given to anonymous function which is parameter to $(document).ready function.
You have a scope problem.
Move the login function out separately:
function loginMessage(data) {
$('.header').append(data);
};
function login() {
$('.login-form').submit(function () {
var formData = $(this).serialize();
$("input").prop("disabled", true);
$.post('VRC_LoginProcess.php', formData, loginMessage);
});
}
$(document).ready(function () {
login();
});
EDIT:
in your login function, you are registering a handler to your login form's submit event. And it has to be registered only once.
So, remove `onsubmit=login()` from your form's attributes, and you are good.
Slightly Changed your HTML to this
<form name="login-form" class="login-form" method="post">
<div class="header">
<h1>Sign In</h1>
</div>
<div class="content">
<input type="hidden" name="siteToken" value="$token" />
<input id="username" name="username" type="text" class="input username" placeholder="Username" required="required" />
<div class="user-icon"></div>
<input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
</div>
</form>
and Javascript
$(document).ready(function () {
$('.login-form').submit(function (e) {
e.preventDefault();
var formData = $(this).serialize();
$("input").prop("disabled", true);
$.post('VRC_LoginProcess.php', formData, loginMessage);
function loginMessage(data) {
$('.header').append(data);
}
});
});

Ajax PHP + MySQL registration form tutorial

Until now I have
HTML
<form id="account_reg" action="reg.php" method="post">
<div id="response"></div>
<div class="input">
<label>Login</>
<input name="login" type="text" class="required" id="login" size="30"/>
</div>
<div class="input">
<label>Password</>
<input name="password" type="text" class="required" id="password" size="30"/>
</div>
<div class="input">
<label>Repeat Password</>
<input name="rpassword" type="text" class="required" id="rpassword" size="30"/>
</div>
<div class="input">
<label>Email</>
<input name="email" type="text" class="required" id="email" size="30"/>
</div>
<div class="button">
<input type="submit" name="send" id="send" value="Send"/>
</div>
<div class="input">
<input type="hidden" name="honeypot" id="honeypot" value="http://"/>
<input type="hidden" name="humancheck" id="humancheck" class="clear" value=""/>
</div>
</form>
MY PHP
I have some validation on server side.
`
include("dop/config.php"); //includ Db connect
$login = ($_POST['login']);
$password = ($_POST['password']);
$rpassword = ($_POST['rpassword']);
$email = ($_POST['email']);
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];
if ($honeypot == 'http://' && empty($humancheck)) {
$error_message = '';
$reg_exp = "/^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9-]+\.[a-Za-Z.](2,4)$/";
if(!preg_match($reg_exp, $email)){
$error_message .="<p>A Valid email is required</p>";
}
if(empty($login)){
$error_message .="<p>enter login</p>";
}
if(empty($password)){
$error_message .="<p>Enter password</p>";
}
if(empty($rpassword)){
$error_message .="<p>Enter password again</p>";
}
if($password != $rpassword){
$error_message .="<p>password mut match</p>";
}
}
else {
$return['error'] = true;
$return['msg'] = "<h3>There was a problem with your submission. Please try again.</h3>";
echo json_encode($return);
}
My JS
With Validation.
$('#send').click(function(e)
{
e.preventDefault();
var valid = '';
var required =' is required.';
var login = $('#account_reg #login').val();
var password = $('#account_reg #password').val();
var rpassword = $('#account_reg #rpassword').val();
var email = $('#account_reg #email').val();
var honeypot = $('#account_reg #honeypot').val();
var humancheck = $('#account_reg #humancheck').val();
if(login = ''){
valid ='<p> Your Name '+ required +'</p>';
}
if(password='' || company.length<=6){
valid +='<p> Password '+ required +'</p>';
}
if(rpassword != password){
valid +='<p> password must match </p>';
}
if(!email.match(/^([a-z0-9._-]+#[a-z0-9._-]+\.[a-z]{2,4}$)/i))
{
valid +='<p> Your Email' + required +'</p>';
}
if (honeypot != 'http://') {
valid += '<p>Spambots are not allowed.</p>';
}
if (humancheck != '') {
valid += '<p>A human user' + required + '</p>';
}
if(valid !=''){
$('#account_reg #response').removeClass().addClass("error")
.html('<strong> Please Correct the errors Below </strong>' + valid).fadeIn('fast');
}
else{
//$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
var formData = $('#account_reg').serialize();
$('#send').val("Please wait...");
submitForm(formData);
}
});
function submitForm(formData) {
$.post('reg2.php',formData, function(data){
//console.log(data);
$('#send').val("Send");
if (data === '1') {
alert('ok!');
} else {
alert('wrong shit');
}
});
};
I didn't do yet the MySQL part With Inserting and checking if account is already registered.
The first problem that I have is on Click event redirects me on reg.php even when I use e.preventDefault();
If anybody knows a good tutorial for creating registration form or any suggestion.
The form is submitted, that is why you get to reg.php. From what I see you are submitting the data with a custom function anyway so the quickest way to fix that would be to change the submit input into a regular button. So
<input type="submit" name="send" id="send" value="Send"/>
becomes
<input type="button" name="send" id="send" value="Send"/>
I think that it might also help if you return false when you find an error in the function that validates the form when.
A side question: I find it strange that you chose to have a honeypot field with a value (http://). Usually those fields are empty.. Is there any specific reason for doing so?
You need to keep all your JS code expect function submitForm(formData) inside $(document).ready(function(){});
If I'm not wrong there is no variable with name company so change this variable to password i,e. in second if condition of your validation.
Note: If some errors exist in your code then don't escape from those errors instead try to debug it.
there is something wrong with JS code when the code is not working
maybe you can try from this example for SignupForm using JQuery http://bit.ly/1aAXy5U

Jquery,AJAX & PHP, form submition not working

Basically i am trying to create a validation for the form. I want it to check if it can connect to the DB and if true to proceed to another page and if false to return an error.
I am inputting the wrong details to make it just display the error but somehow it always returns "TRUE" on page load... and everytime i click the submit it doesnt do anything regardless of my entry...
thx
<script>
$(document).ready(function(){
var u = $('#username');
var s = $('#server');
var p = $('#password');
$('#iValForm').submit(
$.post("connect.php", {u: u.val(),p: p.val(),s: s.val()}, function(fd){
if (fd == "true"){
alert("Is: " + fd);
return false;
} // if1
if (fd == "false"){
alert("Is2: " + fd);
return false;
} // if2
} //post function
) //Post
) //submit
}) //document
</script>
<form class="iValForm" id="iValForm" method="post">
<fieldset>
<legend id="error"> </legend>
<p>
<label for="username">Username </label>
<input id="username" name="username" class="required" /> </input>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" class="required"/> </input>
</p>
<p>
<label for="server">Server</label>
<input id="server" name="server" class="required"/> </input>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
Connect.php
<?php
$user = $_POST['u'];
$password = $_POST['p'];
$server = $_POST['s'];
#$con = mysql_connect ($server, $user, $password);
if (!$con) {
$response = "false";
echo $response;
} else {
$response = "true";
echo $response;
}
?>
change your php script
if (!$con) {
$response = 'false';
echo $response;
} else {
$response = 'true';
echo $response;
}
and in javascript
if (data == 'false')

Categories