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.

Toggle element visibility based on validation results

Given the following HTML
<form class="form-horizontal"
asp-controller="Installation"
asp-action="CreateUser"
method="post">
<fieldset>
<!-- Form Name -->
<legend>Account Creation</legend>
<!-- Username input-->
<div class="form-group">
<label class="col-md-4 control-label" for="userName">Username</label>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span class="has-error" asp-validation-for="UserName"></span>
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email"
name="email"
type="text"
placeholder="jane#doe.com"
class="form-control input-md"
required=""
asp-for="Email">
<span class="help-block">Enter your e-mail address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password"
name="password"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="Password">
<span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
<div class="col-md-4">
<input id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="PasswordConfirmation">
<span class="help-block">Re-enter your password</span>
</div>
</div>
<!-- Submit -->
<div class="form-group">
<label class="col-md-4 control-label"
for="createAccount"></label>
<div class="col-md-4">
<button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
</div>
</div>
</fieldset>
</form>
I would like to hide/show the usernameTip span, when the asp-validation-for span contains a validation error, along with any other span that i'm using as a tip when there is an adjacent asp-validation-for span.
Reading this post I can get the JavaScript needed to show/hide the span. The only thing I can't figure out is if the View actually has knowledge of the validation errors in a manor that lets me conditionally hide/show that usernameTip span if errors exist.
Does anyone know what I need to do in order to toggle the visibility based off the data annotation errors on my model?
When looking in Chrome, asp-validation-for span is turned into this at compile time:
<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>
EDIT
When validation fails, there is a ==$0 appended to the end.
Usernames must be between 2 and 50 characters == $0
I do not see any classes being added or removed from the span when the validation fails.
Edit 2
I got this working using the accepted answer. For those looking in the future however, you can use MVC's ViewData property in the view to determine if there are errors.
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
#if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
{
<span class="help-block">Enter a unique Username</span>
}
else
{
<span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
}
</div>

<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
<script>
if( $("#error").text().length>0){
//show usernameTip
}
</script>

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}"

How do I do form validation and conditional markup in angularjs?

How do I get the errors class/message to display using angular js and forms etc?
I tried this but it doesn't seem to validate at all:
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="obj.title.$invalid">
You are required to enter a name.
</div>
http://plnkr.co/edit/C6eU4pIS8FTfA59SCShh?p=preview

You have to wrap it inside a <form>, give the form a name and the input a name, then access the validity though formName.inputName
<form name="form">
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" name="title" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="form.title.$invalid">
You are required to enter a name.
</div>
</form>
Be aware that <form> is an instance of FormController in angular. That's where we have angular validation.
DEMO

ng-class is not applied

I am trying to validate a form using AngularJS. This is my form:
<form ng-controller="LoginCtrl" role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: email.$invalid }" id="email">
</div>
</div>
</form>
The ng-class is never applied. I tried email.$valid, email.$invalid and email.$error. The controller doesn't do anything except for logging to the console, so I know it is called. When I do set $scope.email = 'asd#asd.com' hardcoded it is set correctly though.
Why isn't my ng-class applied when I enter no value or an invalid string?

You must qualify with the form name as well:
<form ng-controller="LoginCtrl" name="emailForm" role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: emailForm.email.$invalid }" id="email">
</div>
</div>
</form>
Angular has its own directive for <form> and therefore understands that if it sees a form, it should add an object to the current scope that is named the same. In this case emailForm. So, in the controller you would address the email field as $scope.emailForm.email.
Since, you are specifically looking for required you could also use this:
ng-class="{ error: emailForm.email.$error.required }"