Tab key is not working using HTML and javascript - javascript

I have one issue in Tab key enter using HTML.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">User Name :</span>
<div ng-class="{ 'myError': billdata.uname.$touched && billdata.uname.$invalid }">
<input type="text" name="uname" id="uname" class="form-control" placeholder="add user Name" ng-model="login_name" ng-minlength="6" ng-keypress="clearField('uname');" >
</div>
</div>
<div class="help-block" ng-messages="billdata.uname.$error" ng-if="billdata.uname.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your user name should be 6.</p>
</div>
<div class="input-group bmargindiv1 col-md-12" ng-hide="showpass">
<span style="position:absolute; right:5px; margin-top:6px; top:0px;"><button class="btn btn-xs btn-success"ng-mousedown="hideShowPassword();" ng-mouseup="hideShowPassword();" ng-mouseleave="hidePassAfterLeave();" ><i class="fa fa-eye"></i></button></span>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'myError': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="passno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!##\$%\^&\*])(?=.{8,})/" ng-keypress="clearField('passno');" >
</div>
</div>
In the above code suppose user's focus first in the user name field.In this condition when user is pressing tab key focus is not moving to password field but 2 times pressing the tab key the focus is happening on password field.Here i need for first time pressing tab key the focus should go to password field.Please help me.

Set attribute
tabindex="-1"
to the posts you want to skip
Check this fiddle:
JSFIDDLE

Related

Create a field to Credit Card Form

I am doing a payment form and i want that when the user type his credit card number every 4 characters automatically inserts a space.
I tried with data-mask but i don't work and on web i don't find what i searched.
How can i get this result in the most simple way?
<div class="form-group">
<label class="col-sm-2 col-form-label" for="numero_carta">Numero Carta</label>
<div class="input-group">
<input type="text" class="form-control" data-mask="9999-9999-9999-9999" data-mask-placeholder="*">
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>

Something is causing my page to keep loading in the center?

I've been able to narrow down where the 'error' occurs, which is within the credit card form section:
<div class="form-group">
<label for="cardNumber">Your card number</label>
<div class="input-group">
<input
type="tel"
class="form-control card-number input-medium"
name="cardNumber"
placeholder="Enter Your Valid Card Here"
autocomplete="cc-number"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
<div class="form-group">
<label for="cardNumber">Your Email Address</label>
<div class="input-group">
<input
type="email"
class="form-control"
name="email"
placeholder="Enter Your Valid Email Here"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
</div>
My suspicious are that the form I'm using (which uses the Stripe API) has a customer error reporting feature, so if for example the customer's card has expired then an error pops up just above the 'form-group' code shown above - and also in the php and javascript there is a reference to .index.php which is at the bottom of the page here:
<script>
$('.close').click(function(){
window.location.href='index.php';
});
</script>
But that's only my hunch....
Any ideas why this page is behaving like this? Thanks!
Answer = remove 'autofocus' - thanks to #Rick

Can not validate email field using angular.js

I have one issue in validation of email using Angular.js.In my code i am using ng-message to display the validation message.for some invalid type email(e.g-#abc.com),it showing the validation message but in some case if i am typing like this .com#abc its not showing any validation message.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Email Id :</span>
<div ng-class="{ 'has-error': billdata.email.$touched && billdata.email.$invalid }">
<input type="email" name="email" id="contactno" class="form-control" placeholder="User email" ng-model="user_email" >
</div>
</div>
<div class="help-block" ng-messages="billdata.email.$error" ng-if="billdata.email.$touched">
<p ng-message="email" style="color:#F00;">This needs to be a valid email</p>
</div>
Here i need this field will validate with proper email format(i.e-abc#gmail.com).Please help me to resolve this issue.

Can not get any message before navigate to other page using angular.js

i need to show one alert message before navigating to another page using Angular.js and Ui-router.I am explaining my code below.
<form name="billdata" id="billdata" confirm-on-exit enctype="multipart/form-data" novalidate>
<div id="SHOWDATA">
<div id="transactionsPortlet" class="panel-collapse collapse in">
<div class="portlet-body">
<div class="totalaligndiv">
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">First Name :</span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="first_name" >
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Last Name :</span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="last_name" >
</div>
<div class="input-group bmargindiv1 col-md-12">
<input type="button" class="btn btn-success" ng-click="addUserData(billdata);" id="addProfileData" ng-value="buttonName" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</form>
My controller page code is given below.
var dashboard=angular.module('Channabasavashwara');
dashboard.directive('confirmOnExit', function() {
return {
link: function($scope, elem, attrs) {
/* window.onbeforeunload = function(){
if ($scope.billdata.$dirty) {
return "The form is not saved, do you want to stay on the page?";
}
}*/
$scope.$on('$locationChangeStart', function(event, next, current) {
if ($scope.myForm.$dirty) {
if(!confirm("The form is not saved, do you want to stay on the page?")) {
event.preventDefault();
}
}
});
}
};
});
Here my requirement is suppose user had filled 2 given field inside the form and suddenly navigates to another page without submitting.In this condition user should get the confirmation message to stay on this page or not.Here i am using ui-router for navigating the view.Please help me to resolve this issue.

Send form data in a querystring to url with AngularJS

I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do

Categories