I'm trying to do form validation with AngularJS but somehow the page won't show my required message.
Can anyone point me in the right direction what I'm missing at this time? I've just picked up AngularJS and I'm trying to write a proof of concept, so we can use this in production.
HTML
<form id="signup" class="form-horizontal" name="signup" novalidate>
<legend>Register</legend>
<div class="control-group">
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i> </span>
<input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required>
<span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
</div>
</div>
</div>
JavaScript
function registerController($scope){
$scope.master = {};
$scope.reset = function(){
$scope.register = angular.copy($scope.master);
}
};
As J.Pip stated, the message wasn't shown due to mis formatted HTML code. It should be solved with the code below.
HTML code
<form id="signup" class="form-horizontal" name="signup" novalidate>
<legend>Register</legend>
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i> </span>
<input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required />
<span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
</div>
</div>
</div>
</form>
Related
I want to submit form but form submit button does not work,
Please Guide me. I want to submit my form using javascript. Form validation is working fine but I am unable to submit my form. I am new user. If any one help me to submit this form.
I have a code:
});
<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="page-content">
<div class="form-v4-content">
<form class="form-detail" action="abc.html" method="post" id="myform">
<h2>REGISTER FORM</h2>
<div class="form-group">
<div class="form-row form-row-1">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" class="input-text">
</div>
<div class="form-row form-row-1">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" class="input-text">
</div>
</div>
<div class="form-row">
<label for="your_email">Your Email</label>
<input type="text" name="your_email" id="your_email" class="input-text" required pattern="[^#]+#[^#]+.[a-zA-Z]{2,6}">
</div>
<div class="form-group">
<div class="form-row form-row-1 ">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="input-text" required>
</div>
<div class="form-row form-row-1">
<label for="comfirm-password">Comfirm Password</label>
<input type="password" name="comfirm_password" id="comfirm_password" class="input-text" required>
</div>
</div>
<div class="form-checkbox">
<label class="container"><p>I agree to the Terms and Conditions</p>
<input type="checkbox" name="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="register" value="Register">
</div>
</form>
</div>
</div>
I just want to submit my form. I don't know what is the problem
The form doesn't submit because you told it not to.
jQuery.validator.setDefaults({
debug: true,
From the docs:
debug (default: false)
Type: Boolean
Enables debug mode. If true, the form is not submitted...
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.
First, the reason why I have three forms on one page is for layout purposes. I have three input boxes going across one line and then another under it and so on. If I place them under one form tag, I get bad looking input boxes that goes from top to bottom. I have tried some solutions but they have not worked. Each line would put 3 three entries instead of one and some data would not show up or only one form would show up in the database.
HTML
<form class="form-inline" id="Test1" method="POST">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label> </div> </form>
<div class="form-group"><br>
<div class="col-sm-offset-2"> <button type="button" class="SB btn btn-default">Book Now</button> </div>
<script>
$(document).on('click','.SB',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.php', formData
);
});
I only get the first form with this and the other two are blank but are on a single line. All inputs are unique. I have also tried the docbyid and it would add three lines but not work correctly. Any Help would be great.
PHP:
require('DBCon.php');
$statement = $link->prepare("INSERT INTO Database (FN, LN, EM) VALUES( :CFN, :CLN, :CE)");
$ClientFN = $_POST['FN'];
$ClientLN = $_POST['LN'];
$ClientEmail = $_POST['EM'];
$statement->execute(array(
":CFN" => "$ClientFN",
":CLN" => "$ClientLN",
":CE" => "$ClientEmail"));
$statement = null;
$link = null;
// Echo Successful attempt
echo "<p Data added to database.</p></br></br>";
?>
Your button should call a function rather than submit the form. Submitting will only send the data from the first form.
You should really use one form and use CSS to correct any display issues, but if you were to use separate forms, the following should do what you are looking for (make sure your closing tags are in the correct place):
<form class="form-inline" id="Test1">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="button" class="sumbitButton btn btn-default">Book Now</button>
</div>
<script>
$(document).on('click','.sumbitButton',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.PHP', formData
);
});
</script>
Try this:
<form method="post" action="Process.PHP">
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="submit" class="sumbitButton btn btn-default">Book Now</button>
</div>
</form>
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
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>