I am using bootstrap 4 in my Umbraco CMS project.
I want to add reCAPTCHA 2 in a registration form but I am having no luck with it.
Generated the keys for the recaptcha and set them in web.config where I can get later.
Here is my code of how I am trying to do it.
At the end of the header tag I included this scripts:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Then the form looks like this:
#using (Html.BeginUmbracoForm<AccountSurfaceController>("RegisterUser", null, new { id = "RegisterForm" }, FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-group">
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<small>Te gjitha fushat e meposhtme duhen plotesuar.</small>
</div>
</div>
<div class="form-group">
<label for="FirstName" class="form-control-label">Emri:</label>
<input type="text" class="form-control" name="FirstName" id="FirstName">
</div>
<div class="form-group">
<label for="LastName" class="form-control-label">Mbiemri:</label>
<input type="text" class="form-control" name="LastName" id="LastName">
</div>
<div class="form-group">
<label for="Username" class="form-control-label">Username:</label>
<input type="text" class="form-control" name="Username" id="Username">
</div>
<div class="form-group">
<label for="Email" class="form-control-label">Email:</label>
<input type="text" class="form-control" name="Email" id="Email">
</div>
<div class="form-group">
<label for="Password" class="form-control-label">Password:</label>
<input type="password" class="form-control" name="Password" id="Password">
</div>
<div class="form-group">
<label for="ConfirmPassword" class="form-control-label">Konfirmo Password:</label>
<input type="password" class="form-control" name="ConfirmPassword" id="ConfirmPassword">
</div>
<div class="form-group">
<div class="col-6">
<label for="captchaContainer" class="form-control-label">Captcha:</label>
</div>
<div class="col-6">
<div id="captchaContainer" class="g-recaptcha" data-sitekey="#ConfigurationManager.AppSettings[DictionaryKeys.ReCaptchaPublicKey]"></div>
</div>
</div>
<button type="submit" class="btn btn-primary">Regjistrohu</button>
}
I read some questions like this in SO but they did not solve my problem.
The recaptcha item shows in the page but when I click on it it creates the error 'too much recursion' in console and shows nothing.
Does anybody know why might cause this issue ?
Thanks in advance.
I found the issue and it was pretty strange indeed.
I had more than one form in my webpage.
The first one had the recaptcha while the other forms did not.
But other forms did have a field as below:
<input name="tagName" type="hidden" value="array" />
And that was the problem because when I change te name attribute to semthing else it works, for example:
<input name="anotherName" type="hidden" value="array" />
I think there is a bug in recaptacha logic to handle this scenario if you put name attribute equal to tagName.
Anyway will report this to recaptach team and let know if this is a bug or there is something I am missing.
Related
I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.
I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false
Trying to get Angular-ui-validate to work with my form with bootstrapcss
Here is the HTML
<div class='container' ng-controller='RegisterController as ctrl'>
<form class="form-register" ng-submit="ctrl.register()">
<h2 class=form-user-details">General Information</h2>
<div class="form-group">
<label for="inputEmail1">Email address</label> <input type="email"
class="form-control" ng-model='inputEmail' id="inputEmail1"
placeholder="Email" required autofocus> <span
style='font-size: 10px; color: red'>Note: Your email will
serve as your username!</span>
</div>
<div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
<label for="inputPassword">Password</label> <input name='password'
type="password" id='inputPassword' ng-model='password'
class="form-control" placeholder="Enter Password" ng-minlength="6" ng-maxlength="30" required>
<input type="password" class="form-control" name='confirm_password'
placeholder="Re-enter Password" ui-validate="'$value==password'"
ui-validate-watch="'password'">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Create
Account</button>
</form>
</div>
Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js
Link to example I saw:
password-check directive in angularjs
3rd example down
Seems easy enough but !form.confirm_password.$error.validator is always true without exception
Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...
Then I needed to add a ng-model to the confirm_password field...
And finally I needed to add the name form to my form.
Then it worked...
This doesn't look any different than what I thought I would normally write when I put a form together in AngularJS, but for whatever reason ngSubmit is not working, and ngDisabled isn't disabling the button when the fields are empty. I took the section and pasted it into a new project to see if it was just acting out due to some other dependencies, but it still doesn't work even after trimming the fat. Can anyone see what is wrong, it's obvious after this amount of time I'm not going to see it myself.
I preloaded the form fields using the controller to verify that they are talking, interpolated the user data in pre tags which are bound to ng-model since I can see it update as I type, and there are no ng errors occuring, even looking at Chromes angular plugin it looks fine. But, login() is never invoked on ngSubmit and the button is never ngDisabled when the required fields are blank.
Stripped down version of the issue that still doesn't work:
<div ng-app="myApp">
<div ng-controller="LoginController as loginCtrl">
<form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required>
</div>
<div class="form-group clearfix">
<button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button>
</div>
<pre>user data = {{loginCtrl.user | json}}</pre>
<pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid -->
</form>
</div>
</div>
<script>
(function() {
'use strict';
angular.module('myApp', [])
.controller('LoginController', [function() {
var self = this;
self.user = { username: 'asdf', password: 'asdf' };
self.login = function() {
console.log("hello world");
};
}]);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
make sure that angular libraries are included.
https://docs.angularjs.org/misc/downloading
and have a look at these solutions
https://github.com/angular/angular.js/issues/2513
and if you like to see my working form...
<div class="col-md-10">
<form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()">
<h2>Sign up</h2>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}">
<label class="control-label col-md-3">UserName <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}">
<label class="control-label col-md-3">Email <span class="required">* </span> </label>
<div class="col-md-4">
<input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}">
<label class="control-label col-md-3">Password <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/>
</div>
<p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p>
</div>
<div class="form-group">
<label class="control-label col-md-3">Confirm Password </label>
<div class="col-md-4">
<input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation"
placeholder="password_confirmation"/>
</div>
<p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p>
</div>
<div class="form-group">
<div class="pull-left">
<a class="btn btn-default" href="/app/assets/images"> Back</a>
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
</div>
</div>
</form>
</div>