I have a AlpineJS signup form with reCAPTCHA I want to validate reCAPTCHA. In google reCAPTCHA we need to pass some callback function for client side validation. Method inside alpine function is not accessible for reCAPCTHA.
<div x-data="alpineFormApp()">
...
Form Input HTML
...
</div>
alpineFormApp = () => {
...
other code
...
validateCaptcha(response){
console.log(response);
}
}
//Captcha callback funtion
function captchaCallbackFn(response){
window.alpineFormApp().validateCaptcha(response);
}
Related
I'm trying to add a captcha to a form, everything works perfectly.
The moment I add that form to an iFrame I start getting a validation error from the captcha.
I'm using Laravel 7.3 and mews/captcha 3.2
the error I get:
Illuminate\Validation\ValidationException: The given data was invalid. in /var/www/html/vendor/laravel/framework/src/Illuminate/Validation/Validator.php:452
HTML code:
<span id="captchaspan"> {!! captcha_img('flat') !!}</span>
<button type="button" class="btn btn-success" id="refresh"><i class="fa fa-refresh" ></i></button>
javascript code:
<script type="text/javascript">
$('.btn-success').click(function(){
$.ajax({
type:'GET',
url:'/refresh-captcha',
datatype:'json',
success: function(data){
$(".captcha span").html(data.captcha);
}
});
});
</script>
and in the controller:
try {
request()->validate(['captcha' => 'required|captcha']);
}catch (\Exception $e){
file_put_contents('log.log', ' captcha problem '.$e,8);
return back()->with('error', 'Captcha Error');
}
refresh Captcha method
public function refreshCaptcha()
{
return response()->json(['captcha'=> captcha_img('flat')]);
}
Important: the problem occurs only when the form is embedded in an iframe.
I'm not sure if this can help, but I had a problem with this library, after hours of trying to figure out the problem and analyzing it, the problem with the library itself, not well tested, anyways my problem was in the config/mews php captcha file there was a property that was called math, I just disabled it, and the check works perfectly now, I hope this can help anyone in the future :)
and if the captcha rule doesn't work try this:
'captcha' => 'required|' , new captchaRule()
along with a custom rule called captchaRule() that simply passes this test:
return captcha_check($value);
for validation you should use captcha_check() function in your controller. pass the submitted captcha string to this function and get a boolean response for validation. like this :
if ( captcha_check($request->captcha) == false ) {
return back()->with('invalid-captcha','incorrect captcha!')
}
I use reCaptcha+validation jQuery plugin:
<script>
$('#contact_us-form').validate({
submitHandler: function(form) {
grecaptcha.execute(); //How to run this syncly?
$(form).ajaxSubmit({ ... }); // This request without token
}
});
</script>
<form>
...
<div class='g-recaptcha' ... />
</form>
This code almost works. Almost because execute is run async and response is come after ajaxSubmit submits form data.
The work around is to assign callback property for g-recaptcha and move ajaxSubmit into that callback:
var my_callback = function() {
$(form).ajaxSubmit({ ... });
}
<div class='g-recaptcha' data-callback='my_callback'/>
But this looks hairly. Furthermore the form variable is not available from my_callback thus I can not reuse this call back between similar forms.
Is there a way to execute synchronously?
I am trying to send data from the front-end to the back-end.
In Polymer I have
<paper-radio-group selected="{{radioSelected}}">
<paper-radio-button name="one">one</paper-radio-button>
<paper-radio-button name="two">two</paper-radio-button>
</paper-radio-group>
in the JavaScript:
radioSelected: {
observer: '_onSourceChanged'
},
_onSourceChanged: function (newValue, oldValue) {
console.log('New value is ' + newValue);
}
How should I construct an ajax call to connect with the backend?
Note that only the newValue is needed for the backend.
You can use the iron-ajax component, is very easy to use.
https://www.webcomponents.org/element/PolymerElements/iron-ajax
This code goes in the html container.
<iron-ajax
id="myRequestId"
url="http://myurl.com"
method="POST"
content-type="application/x-www-form-urlencoded"></iron-ajax>
This goes in any script function where you want to fire the post request.
this.$.myRequestId.body = JSON.stringify(myBodyParams);
this.$.myRequestId.generateRequest();
i am working on a html form where i am using a jquery ajax function that is called in the tag with onSubmit but the problem is that when user presses submit button or enter, the form gets submitted and page gets refreshed and the ajax function is not executed resulting in an output that is undesired.
How can i stop the normal submission and make the form submission only using ajax function and why the ajax function is not getting executed..i even tried .submit attribute of jquery but nithing happened.
please suggest some hacks/methods to deal with it. thanks
You can prevent the default behaviour of the submit event by using
$( "#target" ).submit(function( event ) {
event.preventDefault();
});
This could be find in the JQuery documentation https://api.jquery.com/submit/
To disable form submission change your code to following:
<form action="/" method="POST" onSubmit="return comment();">
...
</form>
function comment() {
...
return false;
}
Working sample is here https://jsfiddle.net/gevorgha/5dyc2ye9/ , try changing return false; to return true; and you will see submission.
I'm using the Jquery Validation Plugin to forms loaded via Ajax (dynamic forms). I know that as of Jquery 1.4, live events on submit is now possible. Now the problem is I want to show a confirm message after the dynamic form has been validated. My code looks like this:
$('.dynamicForm').live('submit',function(){
$(this).validate();
if($(this).valid()){
if(!confirm('Are you sure?'))
e.preventDefault();
}
});
It's not working as expected. Somehow confirmation shows first, then at the second time I submit the form, that's the time the validation happens. Any ideas?
Somehow this seems to work:
$('.dynamicForm').live('mouseover',function(){
$(this).validate({
submitHandler:function(form){
if(confirm("Are you sure?")){
form.submit();
}
}
});
});
Use the submitHandler function available in the validate options:
$(".dynamicForm").validate({
submitHandler: function(form) { //Only runs when valid
if(confirm('Are you sure?'))
form.submit();
}
})
From the docs - submitHandler:
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.