I don't know how can i validate the recaptcha thing via jQuery. Please help. I have the contact us form with the following fields:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#signup').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
messages: {
name: {
required: 'FULL NAME Missing'
},
email: {
required: "E-MAIL ADDRESS Missing",
email: "E-MAIL ADDRESS Not Valid"
}
});
});
</script>
<form action="index.php" method="post" name="signup" id="signup">
<p>
Full Name
<br>
<input name="name" type="text" class="required" id="name" title="Type your Full Name into this box" value="<?php echo $_POST['name']; ?>">
</p>
<p>
E-Mail Address
<br>
<input name="email" type="text" id="email" title="Type your E-Mail Address into this box" value="<?php echo $_POST['email']; ?>">
</form>
Validation with the jQuery is working, but no idea how to implement the recaptcha into this.
thanks all for your comments,will get it done by simple library :)
http://www.white-hat-web-design.co.uk/articles/php-captcha.php
And validation by using php after submitting of the form (it was easy for me to implement in less time in php than jquery. :) .
special thanks to Felix Kling :).
Dave
For those sort of validate, there is a validation method in jQuery validate plugin known as remote.
Check it here
$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: "check-email.php"
}
}
});
In this check-email.php should return string "true" to be considered valid. and string "false" to be considered false.
Related
I have a form. That form having some field as like Name, Phone No., Email and submit button
I have an AWS hosted server. have a database also. So I want to know one thing when user will type his name, and phone no. then pass the data to my database without user pressing submit.
Please help me to implement it.
What you are looking for is AJAX. I recommend you to use a library such as JQuery, which will make it a lot easier for you.
What you are looking for is most likely an onBlur method on your inputs. If your are typing in a textfield then it is focused, then when you change textfield it is Blurred. So you'd want something like, .
EDIT
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<form action="" method="post" id="ajaxForm">
<input type="text" id="name" name="name" placeholder="name">
<input type="text" id="phone" name="phone" placeholder="phone">
<input type="email" id="email" name="email" placeholder="email" onfocus="validateAndSubmit()">
<input type="submit" value="Send form">
</form>
<p><label id="result"></label></p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
var validateAndSubmit = function()
{
var nameValue = $("#name").val();
var phoneValue = $("#phone").val();
//Validate the data - Do your custom validation here
if (nameValue.length > 3 && phoneValue.length > 5){
//Validation complete
$.post(
"your_save_file.php",
{ name: nameValue, phone:phoneValue },
function(data) {
alert("Data saved");
}
);
document.getElementById("result").innerHTML = "Validation completed";
} else {
//Not validated, do nothing
document.getElementById("result").innerHTML = "Validation failed";
}
};
-->
</script>
</body>
</html>
This will do what you requested. However, I would not recommend you to do this. Because if a user accidently submitted the wrong data then the data will already have been sent. I would recommend you to have a submit button that will activate the function.
I made a simple contact form for my website. At the moment, after sending the message, it shows "The message is sent successfully" but doesn't really send. It can't deliver to the stated email address.
Why so? Is there anything wrong in my code? Also
jQuery(document).ready(function($){
the above function isn't working I guess.
My PHP file:
<div id="contact">
<!--
Contact form begins
-->
<div class="container">
<?php
$hasError=false;
$sent=false;
if(isset($_POST['submitform'])){
$name=trim(htmlspecialchars($_POST['name'],ENT_QUOTES));
$email=trim($_POST['email']);
$message=trim(htmlspecialchars($_POST['message'], ENT_QUOTES));
$fieldsArray=array(
'name'=>$name,
'email'=>$email,
'message'=>$message
);
$errorArray=array();
foreach($fieldsArray as $key=>$val){
switch($key){
case 'name':
case 'message':
if(empty($val)){
$hasError=true;
$errorArray[$_key]=ucfirst($key)."field was left empty.";
}
break;
case 'email':
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$hasError=true;
$errorArray[$key]="Invalid email address entered";
}else{
$email=filter_var($email, FILTER_SANITIZE_EMAIL);
}
break;
}
}
if(hasError!==true){
$to="jabirfatah91#yahoo.com";
$subject="Message from your website";
$msgcontents="Name: $name<br>Email:$email<br>Message: $message";
$headers.="MIME-version:1.0\r\n";
$headers.="From:$name<$email>\r\n";
$mailsent=mail($to, $subject, $messagecontents, $headers);
if($mailsent){
$sent=true;
unset($name);
unset($email);
unset($message);
}
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Conatct form</title>
<link rel="stylesheet" type="text/css" href="contactformdesign.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#contactform").validate({
rules:{
name:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
message:{
required:true,
minlength:50
}
},
message:{
name:{
required:"Please type your name",
minlength:"Your name seems a bit short"
},
email:{
required:"Please enter your email address",
email:"Please enter a valid email address"
},
message:{
required:"Please type your message",
minlength:"Your message seems a bit short. Please enter minimum 50 character"
}
}
});
});
</script>
</head>
<body>
<div class="container">
<h1>Contact form</h2>
<form id="contactform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" novalidate>
<?php
if($sent===true){
echo "<h2 class='success'>Thanks, your message has been sent successfully</h2>";
}elseif($hasError===true){
echo '<ul class="errorlist">';
foreach($errorArray as $key =>$val){
echo "<li>".ucfirst($key)."field error-$val</li>";
}
echo '</ul>';
}
?>
<input type="text" name="name" value="<?php echo (isset($name)? $name: ""); ?>" placeholder="Your name">
<input type="email" name="email" value="<?php echo (isset ($email)? $email:"");?>" placeholder="Your E-mail">
<textarea name="message" placeholder="Your Message"><?php echo (isset($message)? $message: ""); ?></textarea>
<input type="submit" name="submitform" value="Send">
</form>
</div>
</body>
</html>
</div>
<!--
Contact form ends.
-->
If you're trying to send the mail directly FROM the email entered by the user, some mail receivers will block mail from certain addresses and it will never get through, despite your SCRIPT thinking it sent successfully.
This was a problem I personally had with Wordpress's 'Contact Form 7', and found some other references to on-line.
It was solved by NOT using the email entered in the form, but using the site's contact email - 'contact#yoursite.com', and just referencing the email address in the body of the email.
As for jQuery's document ready -
make sure jQuery is loaded on the page
Check out the docs again - http://api.jquery.com/ready/
Do you really need that syntax? Is something else using '$' on your page? If not, it's much simpler to use $(function(){ //your code });
open a new question if you really can't solve it using the docs
I have the below code for implementing a very basic login system on my site (using jQuery Mobile). The problem is that, when submitting the form through jQuery Mobile (and therefore using the validator), the validator always returns false and throws an error, even if the password is correct. When I wrote a separate form with nothing other than the two textboxes and a submit button and ran it directly to the validation script, it returned the correct value of true or false depending on the given password. What's wrong with the jQuery script that causes it to always return false?
HTML/JS:
<form action="logins.php" method="POST" id="loginForm" name="loginForm" data-ajax="false">
<label for="email" class="ui-hidden-accessible">Email Address:</label>
<input type="text" id="email" name="email" value="" placeholder="Email Address" />
<label for="pass" class="ui-hidden-accessible">Password:</label>
<input type="password" id="pass" name="pass" value="" placeholder="Password" />
<input class="submit" data-role="submit" type="submit" value="Submit" />
</form><br>
<br>
Return to home page
<script>
$('#login').bind('pageinit', function(event) {
$('#loginForm').validate({
onkeyup: false,
onclick: false,
onfocusout: false,
rules: {
email: {
required: true,
email: true
},
pass: {
required: true,
remote: {
url: "passcheck.php",
type: "post"
}
}
},
messages: {
email: {
required: "You must enter an email address.",
email: "You must enter a valid email address."
},
pass: {
required: "You must enter a password.",
remote: "Your username/password combination is incorrect."
}
}
});
});
</script>
PHP (passcheck.php):
<?php
require("common.php");
$query = "SELECT password FROM users WHERE email = :email";
$query_params = array(':email' => $_POST['email']);
try {
$stmt = $conn->prepare($query);
$stmt->execute($query_params);
} catch(PDOException $ex) {
die("Failed to run query.");
}
$hash = $stmt->fetchColumn();
if(crypt($_POST['pass'], $hash) === $hash){
echo "true";
} else {
echo "false";
}
You should be using the submitHandler to write a function to handle the actual checking of the username/password via AJAX using AJAX Form: http://www.malsup.com/jquery/form/#api.
You don't have to use AJAX Form and can write your own method to handle the login checking using the jQuery ajax() method, but AJAX Form has it prewritten for you.
Also, you don't need the onkeyup, onblur, etc. there - all you need is onsubmit set to true. Your code should look like this:
<script>
$('#login').bind('pageinit', function(event) {
$('#loginForm').ajaxForm(); // Set as an AJAX Form - See Documentation Above
$('#loginForm').validate({
onsubmit: true,
rules: {
email: {
required: true,
email: true
},
pass: {
required: true
}
},
messages: {
email: {
required: "You must enter an email address.",
email: "You must enter a valid email address."
},
pass: {
required: "You must enter a password.",
}
},
submitHandler: function(form) {
$("#loginForm").ajaxSubmit();
}
});
});
</script>
Jquery does not work on the Internet explorer . However it runs on other webbrowsers .
The code which I wrote is
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form)
{
$.post('process.php', $("#myform").serialize(), function(data)
{
$('#results').html(data);
});
}
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"><div>
</body>
</html>
process.php
<?php
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>
How do I run this code on INTERNET EXPLORER .Any help is very much appreciated on this
Remove ',' after this line
email: "A valid email will help us get in touch with you.",
should be
email: "A valid email will help us get in touch with you."
In your messages block it is like this
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.", // <<<< HERE REMOVE IT
},
you need to remove ',' (comma) in the last line no need for it.
Try the below code:-
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form)
{
$.post('process.php', $("#myform").serialize(), function(data)
{
$('#results').html(data);
});
return false;
}
});
});
</script>
I tried to execute your code at my end. Please add doctype at the top. I used the same and it worked while it was not working earlier.
<!DOCTYPE html>
thanks
You should add return false to submitHandler.
Or you can convert your submit input to a button that doesn't submit the form using <button>Submit</button>.
I have the following code:
JS
<script type="text/javascript">
$(function(){
$('#fgotpwfield').hide();
$('#login_submit').click(function() {
$('#form_result').fadeOut('fast');
$('#myccrxlogin input').removeAttr('disabled');
$('#myccrxlogin').submit();
});
if ($("#myccrxlogin").length > 0) {
$("#myccrxlogin").validate({
rules: {
email: { required: true, email: true },
password: 'required'
},
messages: {
email: { required: 'Your email address is required.',
email: 'Please enter a valid email address.'},
password: 'Your password is required.'
},
submitHandler: function(form) {
$('#myccrxlogin input').attr('disabled','true');
$('#login_submit').fadeOut('fast');
$('#forgotpw').fadeOut('fast');
$('body').append('<div id="page_load"></div>');
var email = $("#email").val();
var pw = $("#password").val();
var data = 'email=' + email + '&password=' + pw;
$.ajax({
url: "hidden url",
type: "POST",
data: data,
cache: false,
success: function (html) {
$('#page_load').remove();
if(html == 'OK') {
alert(html);
} else {
//$("#password").val('');
$("#form_result").html(html);
$('#form_result').fadeIn('slow');
$('#myccrxlogin input').removeAttr('disabled');
$('#login_submit').fadeIn('slow');
$('#forgotpw').fadeIn('slow');
}
}
});
} /*close submit handler */
});
};
});
</script>
HTML
<div id="form_result" style="margin:10px; display:none;" class="field-submit-error"></div><div style="clear:both;"></div>
<div id="loginformfield">
<p style="font-size:24px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#f93;">Login</p>
<form class="loginform" id="myccrxlogin" method="post" target="_parent">
<p>
<input name="email" type="text" id="email" tabindex="1" />
<label for="email">E-mail</label></p>
<p><input name="password" type="password" class="text large required" id="password" tabindex="2" />
<label for="password">Password</label></p>
<div class="loading"></div>
<p>I forgot my password</p>
<p><a class="readmore" href="#" id="login_submit" style="margin-bottom:0.5em;" tabindex="3">Login!</a></p>
</form>
</div>
A person enters their email and password, the file is first validated then run through an ajax call successfully. The ajax PHP page echo's either an error or 'OK'. I know the code gets to 'OK' because the alert(html) is triggered but it runs infinitely. Not sure why?
update
I believe I might be running into the recursion issue described here: http://docs.jquery.com/Plugins/Validation#General_Guidelines although I am not sure it applies.
I can't step through, but I believe you need to have your submithandler return false.
I believe the form is being submitted by the form action and the ajax submission.
Looking at the recursion link you posted, you would need to change this line:
$('#myccrxlogin').submit();
so that the raw form is being submitted, rather than the jquery-ized version of the form. In their example,
$(form).submit();
becomes
form.submit();
Try changing your submit line in a similar way.
The amazingly unclear and wild answer is this: I had to add the following into my ajaxed-PHP page. Something about running locally or with the setup I have is wacky. Hopefully this helps somebody.
Add to the first line of your ajax php page:
header('Access-Control-Allow-Origin: *');