I'm working on an ASP.NET MVC web application, and I'm using Bootstrap 3.
I have the following markup inside my login view to show username and password:
<fieldset>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user blue"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="Username" value="#Model.UserName">
</div>
<div class="clearfix"></div><br>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock blue"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="clearfix"></div>
<p class="center col-md-5">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</fieldset>
However, the glyphicon-lock inside the password field is not showing on IE, FF, or Safari:
Related
I created a dropdown menu to log in instead of logging in at Login.cshtml but i can't seem to be able to use the model that contains the email password etc. I am not sure how to explain this but here is what i made so far:
I created the dropdown form and placed it in _LoginPartial.cshtml so it shows on the navbar
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Log-In
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 300px" >
<!----------->
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3></div>
<form id="ajax-login-form" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="col-xs-5">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-danger" value="Log In">
</div>
</div>
<div class="col-xs-5" align="Center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
and after this, i thought i can easily just insert #model loginmodel and i can start using that model but i'm met with so many errors. Any advice on how to do this? I am also open to other approaches too
I've got an issue I cannot seems to figure out. I have a simple form for four text input fields. The spacing looks great on all the browsers except for Chrome on IOS. The spacing between the input fields just seems to be ignored.
I'm using Bootstrap 4. Here's the HTML:
<div class="form-row">
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First name">
</div>
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last name">
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-6 pt-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-6 pt-2">
<input type="tel" class="form-control form-control-sm rounded bg-color-light-gray2" placeholder="Zip Code" name="loanzip" id="loanzip" maxlength="5" value="" />
</div>
<div class="col-md-3 col-lg-3 col-sm-5 col-12 search-results pt-2">
<button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"> </i></button>
</div>
So frustrating when it looks Ok everywhere else.
Enclosed is a screen shot from Chrome on IOS.
Thanks for any help!
Tim
Here it is on mobile Safari...
Latest HTML but leaves extra spacing after the button only on IOS Chrome.
<form name="carloan" id="carloan" action="car-loan-application/" method="post">
<div class="row ml-2 mr-2">
<div class="col-6 col-xl-2 mb-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First Name">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last Name">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="email" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-6 col-xl-2 mb-2">
<input type="tel" class="form-control form-control-sm bg-color-light-gray2" placeholder="Zip Code">
</div>
<div class="col-12 col-xl-4 mb-2 search-results">
<button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
</div>
</form>
In your code, I can see your using col-md-3 which is for tablets, you are to use "col-xs (portrait device) or col-sm (landscape device)" depending on the width on IOS device. Or you can just use media queries or bootstrap 4 form-group class for your div (for a proper view). E.g.
<div class="form-group"> input or form button... </div>
We currently have some hardcoded code:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[6]" ng-value= "[42198]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[42199]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
Ideally it will be dynamic so it should be something like this:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[{{genderQuestion.id}}]" ng-value= "[{{genderQuestion.traits[0].id}}]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[{{genderQuestion.traits[1].id}}]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
But something about going from ng-model="appuser.traits[6]" to ng-model="appuser.traits[{{genderQuestion.id}}]" and ng-value="[42199]" to ng-value="[{{genderQuestion.traits[1].id}}]" seems to make it spazz out and not resolve any of the {{}} fields.
Any idea where I'm going wrong? Technically genderQuestion.id = 6 and genderQuestion.traits[1].id = 42199 but in this format it doesn't seem to like those.
Maybe I'm missing like a toString format or something?
2 way data binding with the ngModel directive doesn't need {{ }} again. You can directly refer to the scope object with genderQuestion.id
appuser.traits[genderQuestion.id].
Ta
I have this in an MVC view
<form id="fileupload" action="#Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="form-group">
<label for="datepicker1">Invoice Date</label>
<div class='bfh-datepicker' id='datepickerDiv'>
<input type='text' id="datepicker1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="InvoiceNumberTB">Invoice Number</label>
<input type="text" class="form-control" id="InvoiceNumberTB" />
</div>
<div class="form-group">
<label for="NetAmountTB">Net Amount</label>
<input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="TaxAmountTB">Sales Tax</label>
<input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceTotalTB">Invoice Total</label>
<input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceDescriptionTB">Description</label>
<input type="text" id="InvoiceDescriptionTB" class="form-control" />
</div>
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</div>
</div>
</div>
But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this
Could someone point me in the correct direction?
Thanks
Wrap the content after the label in a form-control-static div and lose the form-control class on the input:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<div class="form-control-static">
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" />
</span>
</div>
</div>
You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button show">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
Example: http://codepen.io/kspearrin/pen/PqpgYq
I am trying to use the ng-required in a form.
All I did was add ng-required="true" on my input.
In Chrome, when clicking submit it prevents submission and asks the user to fill the field, as expected. On an iPhone, it doesn't show any error and it executes the submit function.
<form name="addGuest" ng-submit="GLCtrl.addGuest()">
<div class="form-group">
<label for="newGuestFirstName">First Name</label>
<input type="text" id="newGuestFirstName" ng-model="GLCtrl.newGuest.firstName" class="form-control" required="true"/>
</div>
<div class="form-group">
<label for="newGuestLastName">Last Name</label>
<input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" class="form-control" required="true"/>
</div>
<div class="form-group">
<label for="arrivalDate">Arrival Date</label>
<div class="input-group">
<input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="GLCtrl.newGuest.arrivalDate" is-open="opened" required="true" close-text="Close"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="GLCtrl.cancelAdd()"><i class="glyphicon glyphicon-remove"></i></button>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-ok"></i></button>
</form>
You need to check if the form is valid before proceeding to your form submission process. In regards to your problem, you are probably relying on HTML5's required attribute which is added when ng-required is true. This might work on chrome but it partially works in IOS.
See the note on this link
Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.
Solution:
Add novalidate in your form, don't use the HTML5 required attribute messaging which is only useful for some browsers. Show required error message explicitly.
Sample HTML implementation:
<form name="form" ng-submit="submit(form, user)">
<input type="email" required name="email" ng-model="user.email">
<div ng-show="form.email.$error.required>This field is required</div>
<input type="password" required name="password" ng-model="user.password">
<div ng-show="form.password.$error.required>This field is required</div>
<button type="submit">Login</button>
</form>
Sample Controller implementation:
$scope.submit = function(form, user) {
if(form.$valid) { // guard against any errors
// do you login process here..
}
};
Additionally, you can also use the ng-disabled approach to disable the submit button when when form is invalid.
<button type="submit" ng-disabled="form.$invalid">Login</button>
UPDATE:
This update takes into consideration that you are using twitter bootstrap3. By using the following classes: 'has-error' for form-groups and 'help-block' for showing the error messages. By using the ng-class and ng-show directives in showing the errors with angular form validation indicators mentioned in each angular input directives and the FormController and NgModelController documentation and also the guides shown in the developer's guide.
DEMO
HTML
<form name="form" ng-submit="submit(form, guest)" novalidate>
<div class="form-group" ng-class="{'has-error': form.firstName.$invalid && form.firstName.$dirty}">
<label class="control-label" for="newGuestFirstName">First Name</label>
<input type="text" id="newGuestFirstName" ng-model="guest.firstName" name="firstName" class="form-control" required="" />
<div ng-if="form.firstName.$invalid && form.firstName.$dirty">
<span class="help-block" ng-show="form.firstName.$error.required">This field is required</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': form.lastName.$invalid && form.lastName.$dirty}">
<label class="control-label" for="newGuestLastName">Last Name</label>
<input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" name="lastName" class="form-control" required="" />
<div ng-if="form.lastName.$invalid && form.lastName.$dirty">
<span class="help-block" ng-show="form.lastName.$error.required">This field is required</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': form.arrivalDate.$invalid && form.arrivalDate.$dirty}">
<label class="control-label" for="arrivalDate">Arrival Date</label>
<div class="input-group">
<input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="arrivalDate" is-open="opened" name="arrivalDate" required close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div ng-if="form.arrivalDate.$invalid && form.arrivalDate.$dirty">
<span class="help-block" ng-show="form.arrivalDate.$error.required">This field is required</span>
</div>
</div>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-ok"></i>
</button>
</form>
JAVSCRIPT
Controller Logic submit()
var fields = ['firstName', 'lastName', 'arrivalDate'];
$scope.submit = function(form, guest) {
if(form.$valid) {
// form is valid, do you form submission processhere..
} else {
angular.forEach(fields, function(field) {
form[field].$dirty = true;
});
}
};