I am attempting to integrate Google's reCaptcha v2 invisible on an existing page where the form's onsubmit handler already has a function attached that does the client-side validation. If that function returns true, the form will submit and redirect to another page.
My existing implementation does force the recaptcha validator to appear if it determines you're a bot, but immediately after the form still submits successfully and redirects to the next page.
The expected result is if the client-side validation passes, it should execute the recaptcha and display the recaptcha validator if it's heuristics deem you a bot AND prevent the form from submitting until you pass it's validator.
For reference I am testing the recaptcha via this method: https://stackoverflow.com/a/52036368/2684075
Here's the implementation
<form
class="elq-form"
onsubmit="return handleFormSubmit(this)"
...
>
...
</form>
...
<div
class="g-recaptcha"
data-sitekey="MY_SITEKEY"
data-callback="recaptchaOnSubmit"
data-size="invisible"
>
</div>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
<script>
function recaptchaOnSubmit() {
console.log('recaptcha success');
}
(function() {
var form = document.querySelector('.elq-form');
var originalSubmit = form.onsubmit;
form.onsubmit = null;
form.onsubmit = function() {
var isValid = originalSubmit.call(form);
if (isValid) {
window.grecaptcha.execute();
console.log('grecaptcha executed')
}
return isValid;
}
})()
</script>
Are you able to post the contents of handleFormSubmit() function?
I'd suggest using jQuery to handle your event, as it sounds like you're writing on top of an existing project?
The invisible version of the reCAPTCHA is version 3 right? I'm interested, are you displaying version 2, if the reCAPTCHA deems you as a bot via version 3?
$('.elq-form').submit(function () {
// Determine if the reCAPTCHA is successful, ie, use a backend PHP script to validate
if (response == true) {
// return true from the form, therefore, it will proceed
return true;
}
else {
// reCAPTCHA came back as invalid, therefore do not continue.
// We can display an error (paragraph) or anything you like
return false;
}
});
Also may I suggest https://developers.google.com/recaptcha/docs/v3 if you haven't checked it already? As it provides an example for the client side JS to embed.
Hope this helps,
Related
I have a form defined in HTML which can be submitted with a submit button.
I also have a jquery handler in which there is a logger on a non existing object.
$("#myform").submit(function() {
console.log(nosuchobject);
return false;
});
With the logger in place, the form is submitted and the browser changes page. But without the logger, the form is not submitted.
My guess is that when there is an error in the logger the returned value is not false. But is it true ? And how come an error allows for a form to be submitted anyway ?
In your logger code you have print a variable instead of string. just update you code with following
$("#myform").submit(function() {
console.log('nosuchobject');
return false;
});
Use preventDefault for preventing form submition:
$("#myform").submit(function(e) {
e.preventDefault();
});
if you get a js error in the submit function the code after the error won't be executed what means that it does not return a false. You can prevent the form submission at the start of your function like this:
$("#myform").submit(function(event) {
event.preventDefault();
// it does not matter if there is an error now.
console.log(nosuchobject);
});
You should still write your code so it runs without errors.
basically i have a form and in that form i have a username textbox with a submit button.
now what i want is that before we submit the form i want to send the text value to server so the server could check if the username has not been taken by any other user and then submit the form, based on research i had, i found this tutorial useful https://scotch.io/tutorials/submitting-ajax-forms-with-jquery, altough this tutorial is using php for server coding and i am using java servlet but my ajax script never gets to execute.
here is my code:
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>
<script>
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'username' : $('input[name=UserName]').val(),
};
alert('hello');
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '../postr', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
</script>
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
name="UserName" onblur="Usernameerrorfunc(this, 'Usernameerror_spn', 'Usernamenowallow_spn');" maxlength="30" onclick="textboxfocus(this)"/>
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn"/>
</div>
</form>
<script>function Usernameerrorfunc(field, errordiv, Notallowcharserror_SPN){
if (field.value == '') {
field.style.borderColor = "red";
document.getElementById(Notallowcharserror_SPN).style.visibility = "hidden";
document.getElementById(errordiv).style.visibility = "visible";
} else if(!field.value.match(/^[a-zA-Z0-9~`!##\(\.)]+$/)){
field.style.borderColor = "red";
document.getElementById(Notallowcharserror_SPN).style.visibility = "visible";
document.getElementById(errordiv).style.visibility = "hidden";
} else {
field.style.borderColor = "rgb(150,150,150)";
document.getElementById(errordiv).style.visibility = "hidden";
document.getElementById(Notallowcharserror_SPN).style.visibility = "hidden";
}
}</script>
as you can see in my ajax script i have an alert() which it should pop up hello but it never does
Good Morning!
I think there are several things to say about your code. First of all your submit function:
$('form').submit(function(event) { ... }
Here you want to catch the submit-event when the user hits the button. Everything good, but since your button is of type=submit the browser will also react on the click and handle the submit-process by itself. Your function won't get called properly. To prevent this you have to escape the default behaviour of your form on submitting:
$('form').submit(function(event) {
event.preventDefault();
$.ajax({ ... });
}
This will do the trick to let the browser do what you want instead of handling the submit by itself.
So now your browser can run your ajax call.
Next thing: The ajax-call.
You did many things right, but some important things wrong. Look at the following structure:
$.ajax({
url: 'your_url_to_send_data_to',
type: 'post', //the method to use. GET or POST
dataType: 'json',
data: data, //your data: {key1:value1, key2:value2}
success: function(data) { //handle a successfull response (200 OK)
alert(data);
//here you can do with your data whatever you want
},
error: function(jqXHR, textStauts, errorThrown){ //handle every error. e.g. 500
alert(textStatus + ': '+errorThrown);
}
}});
This will handle the sending and the recieving of your request. The success function will get called if the server returns an 200 OK. Otherwise the error function gets called.
Now you just have to handle the request on server side properly.
Third thing: What's about the real submit after the name-check?
Since you preventDefault() the default browsers action, sou have to do it manually. You could think of triggering the submit again, but you would ran another time in your own function you've written so far.
Therefore you have to do it by your own. But wait! You can combine the two things in one call!
Think about this:
let the user fill your form
let him hit the submit button
preventDefault behaviour of your browser and build a FormData and put all your values in it
prepare your ajax call
send the FormData with your ajax call to your server
Handle name-check and all other things on server-side
answer the request
evalutate the answer in your success function
Note: On server side you have to print the application/json header to let the browser and finally your ajax call handle your answer properly.
Since you want a dynamic check of the user name availability, I suggest you react to the keyup event (note: I also added support for other possible change-incurring events in my demo below) and schedule a check run after a fixed delay. Once the delay transpires, if the user hasn't typed anything in the interim, you can run the AJAX check and update the page; if the user did type something in the interim, you can simply not run the check (yet). This means a check will automatically be run after every flurry of typing, as long as the user ceased typing for at least the hard-coded delay.
With regard to submitting, I would just allow the user to submit the form in the normal way without any last-second AJAX check of user name availability. You're still going to have to perform a server-side check for availability, in case the user disabled JavaScript or somehow constructed their own submit HTTP query, so you may as well depend on that server-side check upon form submission. The dynamic AJAX check is really only beneficial as a quick notification to the user, and so should only be provided if the user edits the user name, and then does not submit the form immediately. Most of the time the user will not submit the form immediately after editing a field, and most users can be relied upon to not submit the form if it is clearly indicated on the page that there is a validation failure.
var USERNAME_CHECK_DELAY = 800;
var userInputValCount = 0;
var userInputVal = '';
window.handlePossibleUserInputChange = function() {
let $userInput = $('#userInput');
let $checkDiv = $('#userCheckLine');
// if this event doesn't reflect a value change, ignore it
if ($userInput.val() === userInputVal) return;
userInputVal = $userInput.val();
// update the value count
let userInputValCountCapture = ++userInputValCount; // closure var
// schedule a potential check run
setTimeout(function() {
// only check the current name if the user hasn't typed since the provoking event
if (userInputValCountCapture !== userInputValCount) return;
checkUsername();
},USERNAME_CHECK_DELAY);
// update the status message
if ($userInput.val().trim() === '') {
$checkDiv.text('');
} else {
$checkDiv.attr({'class':'checking'});
$checkDiv.text('checking...');
} // end if
};
$('#userInput')
// listen to all events that could cause a change in the input value
.on('keyup change',handlePossibleUserInputChange)
// drop is special; the drop event unfortunately fires before the text is changed
// so we must defer the call until after the text is changed
// same with mouseup; occurs when clicking the input box X button in IE
// same with paste via context menu, rather than shortcut (which would trigger keyup)
.on('drop mouseup paste',function() { setTimeout(handlePossibleUserInputChange); })
;
var lastTaken = true;
window.checkUsername = function() {
let $checkDiv = $('#userCheckLine');
let $userInput = $('#userInput');
// just reset the check line if the input value is empty
if ($userInput.val().trim() === '') {
$checkDiv.text('');
return;
} // end if
// ... send ajax call, get result ...
// (for demo purposes, just invert the previous result)
let taken = lastTaken = !lastTaken;
if (taken) {
$checkDiv.attr({'class':'taken'});
$checkDiv.text('user name is taken.');
} else {
$checkDiv.attr({'class':'notTaken'});
$checkDiv.text('user name is available.');
} // end if
};
.taken { color:red; }
.notTaken { color:green; }
.checking { color:grey; font-style:italic; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<div>
<input id="userInput" type="text" placeholder="username"/>
<span id="userCheckLine"></span>
</div>
<input type="submit" value="Submit"/>
</form>
I think you should use the "remote" of jquery validation (https://jqueryvalidation.org/remote-method/) this check the validation of the field in the server. You need jquery.
$("#Registration_Form").validate({
rules: {
Registeration_Username_box: {
required: true,
remote: {
url: "check-email.php",
type: "post"
}
}
}
});
I am doing ajax cross domain request to my php page on server.
I am posting form from html via ajax to my php page on server.
Have problem with validation in client side.
I don't know how to do validation in client side before send form.
html form is standard form, posting input fields: name, last name, message....
My html form, client side:
<script type="text/javascript">
var output = $('.nesa');
$(document).ready(function(){
$("#form1").submit(function (e) {
e.preventDefault();
$.ajax({
url: 'http://www.example.com/form.php',
crossDomain: true, //set as a cross domain requests
type: 'post',
data: $("#form1").serialize(),
beforeSend: function (){
// add spinner
$('.spinner').append('<img id="animacija" src="spinnersmall.gif" alt="Loading" />');
},
success: function (data) {
$(".nesa").html(data);
alert("sent " + data);
},
error: function(){
output.text('Message is not sent!');
}
});
});
});
How to to validation? I try to put code in beforeSend but without success.
Or maybe to use submitHandler?
Idea is when user click submit, that validation start, and if fails to tell "insert your email address". Now when i click submit it send data to server. I want that first check input fields.
This form is actual working it sending data to server, but just need to figure out how to do validation. Where to put validation in ajax call?
Thanks
Create a function to validate form which return true/false. Call the function just before the $.ajax. check if return is false then return.. see the example below...
if(!validateForm())
return false;
First, are you actually using an AJAX form?
You explained that you load the form itself via AJAX, but do you send it that way, too? It looks to me that you're trying to send it the HTML way. You can hook into the click event of the send button before you send the form. However, since the button is added to the page at runtime, you need to register the event to document.
$(document).on('click', 'input[type=submit]', function() {
// Validate form
// Add error message on fail, and return
// Else submit form via AJAX
});
In either case, you can use jQuery's blur event as an alternative to validate each field when the user jumps to the next. You could even validate every time the user presses a key with keypress.
I always validate them right before I enter them into an AJAX call. Here is my exampel
$('#form_nieuwsbrief').bind('submit',function(){
var name = $('input[name=naamNieuwsbrief]').val();
var email = $('input[name=emailNieuwsbrief]').val();
var proceed = true;
if (name==""){
$('input[name=naamNieuwsbrief]').css({'border':'2px solid red'});
proceed = false;
}
if (email==""){
$('input[name=emailNieuwsbrief]').css({'border':'2px solid red'});
proceed = false;
}
if(proceed == false){
$("#msg").append("<div class='alert alert-danger' role='alert'>U bent informatie vergeten in te vullen.</div>");
setTimeout(function(){
$('.alert').fadeOut(400, function(){
$(this).remove();
})
;},10000
);
}
if(proceed == true){ // make the ajax call
This is just a quick one for a newsletter that just requests name and email. But the principle is the same. Just before you make an ajax call, create the if else statement with a variable you set if something is false. else you stick it tot he original validation, thus you can proceed.
Please validate the form before sending ajax request. If there is no error then ajax request should be send otherwise return false.
You can do like:
$("#form1").submit(function (e) {
e.preventDefault();
// Get the Login Name value and trim it
var name = $.trim($('#name').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty.');
return false;
}
});
You can see the demo Here's (http://jsfiddle.net/LHZXw/1/)
You can also make a function onKeyup.
You're already validating via server side correct? Why don't you use that same validation rules to appear like your client side - via Ajax. I have a tutorial on how to do that:
http://michaelsoriano.com/how-to-ajax-validate-forms/
I am trying to add validation to a form that is submitted by ajax, and have it partially working.
Here's the code that submits the form:
<script type="text/javascript">
$(document).ready(function(){$(".sendName").click(function(){
var Email=$("#Email").val();
var Name=$("#Name").val();
var ErrorType=$("input:radio[name=ErrorType]:checked").val();
var Univer=$("#Univer").val();
var ErrorMessage=$("#ErrorMessage").val();
$.post("report.php",{Email:Email,Name:Name,ErrorType:ErrorType,Univer:Univer,ErrorMessage:ErrorMessage},function(data){$("#loadName").html(data).effect('bounce', { times: 5, distance: 30 }, 300);
});
});
});
</script>
That code works perfectly.
I am also using the livevalidation plugin, and have it mostly working as well. The only problem I am having is calling the validation code from within the function that submits the form.
Normally the validation code is called like this:
<form onsubmit="return validate(this)">
However, because the form is being submitted by ajax the current form tag is:
<form onSubmit="return false;">
So what I need to be able to do is call the validate function from within the function that submits the form via ajax.
How would I do something like this? Both scripts are working fine on their own, it's just this one last thing I need to figure out.
So I need to call the validate function when the ajax function is called, and if the form validates the script can complete the ajax request, and if the form does not validate it should not be submitted.
I did some searching and found a couple similar questions, but no solutions. Any help would be appreciated.
The easier way to do this is to only cancel the submit if there is a validation error, otherwise let the submit happen normally.
<form id="new-item" method="post" action="/i">
Then in your javascript:
$('#new-item').submit( function () {
var valid = true;
// do you validation logic
valid = validate(this);
// returning true will let the normal submit action happen
// returning false will prevent the default action (i.e. the form will not be sumitted)
return valid;
});
If you don't want to use the standard submit functionality (though that is a best practice since it works when javascript is disabled) you would do a similar thing but just always return false.
$('#new-item').submit( function () {
var valid = true;
// do you validation logic
valid = validate(this);
if (valid ) {
// send your ajax post request here
}
// returning true will let the normal submit action happen
// returning false will prevent the default action (i.e. the form will not be sumitted)
return false;
});
Agreeing with bill
Assumning this form
<form id="formId" ...
.
.
<input type="submit" />
</form>
Using your code:
<script type="text/javascript">
$(document).ready(function(){
$("#formId").submit(function(){
if (!validate(this)) return false;
var Email=$("#Email").val();
var Name=$("#Name").val();
var ErrorType=$("input:radio[name=ErrorType]:checked").val();
var Univer=$("#Univer").val();
var ErrorMessage=$("#ErrorMessage").val();
$.post("report.php",
{Email:Email,Name:Name,ErrorType:ErrorType,Univer:Univer,ErrorMessage:ErrorMessage},function(data){$("#loadName").html(data).effect('bounce', { times: 5, distance: 30 }, 300);
});
return false; // cancel normal submission
});
});
</script>
I'm trying to use html5 validation and ajax.
The method checkValidity doesn't solve my problem, because it doesn't show the message error in the UI.
I need to launch the browser validation (and show error messages) using js. To do it I found that I have to submit the form and prevent the event. i.e:
$('form#x').submit(function(e){
e.preventDefault();
// ajax code
});
This works ok and the ajax code is only executed if the all the form fileds are valid. However, I realized that once the form is valid, the ajax code is executed as many times as the submit button was clicked. WTF?
I could solve that issue by using a global flag:
flah = 0;
$form.submit(function(e){
e.preventDefault();
if(flag) return;
flag = 1;
//send x ajax
// in ajax callback >> flag = 0
});
Is there any other way to launch the validation without submit?
Is the event-trigger problem a browser bug or is it a problem in my code?
Thanks
try this:
$('form#x').submit(function(e){
e.preventDefault();
if(!this.checkValidity()){
return false;
}
// ajax code
});