We Keep Coding

reCAPTCHA 2 causes 'too much recursion'

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.

_self is not working with a href

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.

open one page to other page in angularjs

Plz tell me how to use link to appear other page in angular js I have used below code but it is not being opened
eg.
<form role="form" ng-submit="resetPassword()">
<div class="form-group">
<input type="password" class="form-control input-lg" id="username" ng-model="credential.password" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="password" ng-model="confirmPassword" placeholder="Confirm Password">
</div>
<button type="submit" class="btn btn-lg btn-primary btn-block">Submit</button>
<div class="form-group m-top15"> Sign in </div>
</form>

You can use $window.location.href = '/index.html';
Where $window will be one of your controller dependency.
If you want to use link, ng-href will be used
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
Refer:
https://docs.angularjs.org/api/ng/directive/ngHref

AngularJS form validation issues

I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>
Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
Any guess what am I missing. Any module that i need to include ?
Here is Plunker

First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
One more thing, add 'novalidate' to the form element.
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>

You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
Here is a working plunkr for what you are trying to do.
This is the relevant code:
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+#\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>

Well, I am not sure but I think you also have to use $error with $dirty like this:
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidate to disable default browser validation like this:
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>

AngularJS form validation is always true

loginForm.$valid is always return true, even when required fields are not filled out. I was unable to find a similar problem anywhere.
<form name="loginForm"
class="form-login"
ng-submit="loginForm.$valid && loginCtrl.login(navCtrl)"
novalidate>
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
</div>
<div class="form-group text-right">
Forgot password?
</div>
<div>Login form is {{loginForm.$valid}}</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
Any help is appreciated.

Form validation and related flags will be set only if you have ng-model controllers assigned to the respective controls. So assign ng-model directive to them. Also instead of using id, you could use name. It will then be used as alias (property names) for the respective ng-model controller assigned on the formController instance (ex: loginForm.username.$valid ).
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control"
ng-model="ctrl.userName"
name="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
ng-model="ctrl.password"
name="pwd" placeholder="Enter password" required>
</div>

I had this problem too. The answer was required syntax wasn't there.
So it was always valid to submit the form.

Remember.
if you are on angular 5 material design and using [ngModelOptions]="{standalone: true}" in input field make it false ==> [ngModelOptions]="{standalone: false}"