I have created a login page with validations. I'm using Routes for the page navigations. At first I have redirection from index page to login page.(i.e., index->login) Then my validations worked perfectly fine.
Recently I have added a new home page. So, I'm loading this page first( i.e.,
index -> home -> login). This page contains a link to login page.
The problem now is my validation is not working properly. The error messages are shown on the page load itself.
Below is the code :
<div class='form-fields'>
<input type='email' name='mail_name' ng-model='mail' ng-pattern="emailFormat" required />
<span class="error" ng-show="login.mail_name.$error.pattern">Not valid email!</span>
</div>
<div class='form-fields'>
<input class='input-fields' type='password' name='pwd_name' ng-model='password' ng-pattern='passwordFormat' required />
<span class="error" ng-show="login.pwd_name.$error.pattern">Passowrd Error Message</span>
</div>
Js File :
$scope.mail = '';
$scope.emailFormat = /^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/;
$scope.password = '';
$scope.passwordFormat = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$#$!%*#?&])[A-Za-z\d$#$!%*#?&]{8,}$/;
Where I'm I going wrong?
Related
I want to test whether my login application displays validation messages correctly. Without adding an id for the form can i check this using ngclass?
<form [formGroup]="authForm">
<div class="form-group">
<label for="email">Email address</label>
<div class="invalid-feedback" *ngIf="authForm.get('email').hasError('required')">
Email is required.
</div>
</div>
</form>
You can validate with the below code. If the alert is displayed in run time. Click inside the field and click on another feild without sending any values.
validationMessage = element(by.css('div.form-group>div');
validationMessage.getText().then((value:string) =>{
expect(value).toBe('Email is required.');
}
For info refer https://www.protractortest.org/#/locators
Hope it helps you
I’m using a library called floating-tabs.js which is being used to create floating navigational buttons: here’s an example of what the layout looks like
<floating-tabs>
//this is my button
<floating-tabs-item icon="ion-android-arrow-dropright-circle" click="goNext(data)"></floating-tabs-item>
</floating-tabs>
<ion-content>
<form name=“formName” ng-submit="goNext(data)">
***form stuff
</form>
</ion-content>
How can I submit/validate the form without having my button inside the form tags
Thanks guys
here i am using simple change password form.
<form name="changepasswordform" novalidate>
<input type="password" placeholder="New Password" class="reset-inputs" name="newpassword" ng-keyup="compare()" ng-model="changePassword.newpassword" maxlength="10" required/>
<span style="color:red" ng-show="submitted && changepasswordform.newpassword.$error.required">Required</span>
</form>
<button type="button" class="reset-submit" ng-click="changepassword(changepasswordform.$valid,changePassword)">Change Password</button>
it consist button out side the form
and please use the script in your controller
$scope.submitted = false;
$scope.changepassword = function(formValidStatus, formdata) {
if (!formValidStatus) {
$scope.submitted = true;
} else {
$scope.submitted = false;
}
}
in the script i am checking form is valid or not if form is not valid i am showing error messages by using submitted variable from script.
This works for me
I'm wondering why my required messages are not hiding on load when a user first views my form?
My code is as per:
<div ng-messages="loginForm.username.$error" class="form-input-error">
<div class="message" ng-message="required">Please enter your username</div>
<div class="message" ng-message="maxlength">Username is too long.</div>
</div>
The ng-message="maxlength" doesn't appear until the requirement is met however, I don't understand why required is showing on load?
Ideally I would like the required message to display if the user tries to submit the form with none of the fields entered or if only one field has been entered. Essentially, meeting the required validation rules.
Here is a JSFIDDLE example
This is because angular validation will evaluate if the form meets the requirements on load and since there is no value in the required field then it's invalid. As the username is 0 characters it's less than the maxlength so that's valid.
By default for ng-messages angular will only show the first message that is invalid. In this case that is fine.
To prevent messages showing until submit is clicked you can set a scope property on submit and use a ng-show on the ng-messages to only show the validation message if submitted:
$scope.submitForm = function(isValid) {
$scope.submitted = true;
// Check to make sure the form is completely valid
if (isValid) {
alert('Form is valid');
}
};
<form name="loginForm" ng-controller="LoginCtrl" novalidate="novalidate" ng-submit="submitForm(loginForm.$valid)">
<div ng-messages="loginForm.username.$error" class="form-input-error" ng-show="submitted">
<div class="message" ng-message="required">Please enter your username</div>
<div class="message" ng-message="maxlength">Username is too long.</div>
</div>
JsFiddle
I have an app I'm trying to do e2e tests with. The app uses a non-Angular login page (Microsoft AD account). So, I fill in the user and password then click the "sign in" button with the following code:
var user = asAdmin ? config.adminUser : config.user;
browser.driver.findElement(by.id('cred_userid_inputtext')).sendKeys(user);
browser.driver.findElement(by.id('cred_password_inputtext')).sendKeys(config.pass);
browser.driver.findElement(by.id('cred_sign_in_button')).click();
The user and password get filled in and the "sign in" button (which is a <span>) looks like it was clicked (changes color), but nothing happens.
I wait for quite a while (minutes) and it just doesn't work. However, if I just use the mouse, it does work. I have also tried tacking on a "\n" to the end of the password string to simulate the enter key. This is ignored.
The html for the pertinent parts of the login look like this:
<form id="credentials" method="post" action="https://login.microsoftonline.com/...">
<div id="cred_userid_container" class="login_textfield textfield">
<span class="input_field textfield">
<label for="cred_userid_inputtext" class="no_display" aria-hidden="true">User account</label>
<div class="input_border">
<input tabindex="1" id="cred_userid_inputtext" class="login_textfield textfield required email field normaltext" placeholder="someone#example.com " type="email" name="login" spellcheck="false" alt="someone#example.com " aria-label="User account" value="" autocomplete="off">
</div>
</span>
</div>
...
<div id="cred_password_container" class="login_textfield textfield" style="opacity: 1;">
<span class="input_field textfield">
<label for="cred_password_inputtext" class="no_display" aria-hidden="true">Password</label>
<div class="input_border">
<input tabindex="2" id="cred_password_inputtext" class="login_textfield textfield required field normaltext" placeholder="Password" spellcheck="false" aria-label="Password" alt="Password" type="password" name="passwd" value="">
</div>
</span>
</div>
...
<li class="login_cred_options_container">
<div id="cred_kmsi_container" class="subtext normaltext">
<span class="input_field ">
<input tabindex="10" id="cred_keep_me_signed_in_checkbox" type="checkbox" value="0" name="persist">
<label id="keep_me_signed_in_label_text" for="cred_keep_me_signed_in_checkbox" class="persist_text">Keep me signed in</label>
</span>
</div>
<span id="cred_sign_in_button" tabindex="11" onclick="Post.SubmitCreds();return false;" class="button normaltext cred_sign_in_button refresh_domain_state disabled_button" role="button" style="opacity: 1;">Sign in</span>
<div id="recover_container" class="subtext smalltext" style="opacity: 1;">
<span>
<a id="cred_forgot_password_link" tabindex="12" href="https://login.microsoftonline.com/resetpw.srf?lc=1033&id=501148">Can’t access your account?</a>
</span>
</div>
</li>
...
</form>
I can't, for the life of me figure out what's going on here.
Any help is greatly appreciated.
UPDATED: added the missing "button" span
UPDATE 2: also tested with Firefox, same problem. The click on the span just doesn't seem to work..
UPDATE 3: For some strange reason, the following code works:
browser.actions()
.mouseMove(browser.driver.findElement(by.id('cred_sign_in_button')))
.click()
.perform();
browser.sleep(500);
browser.driver.findElement(by.id('cred_sign_in_button')).click();
If I take either the mouseMove/click or the last click out, it stops working. If I take out the sleep, it is intermittent.
I have no idea why that's working.
Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.
I suggest you upgrade Protractor to latest (1.3.1 as of now), use a custom function waitReady() that browser.wait for elements ready and rewrite your test like this:
var user = asAdmin ? config.adminUser : config.user;
// TODO: use page objects
var userIdInputElm = $('#cred_userid_inputtext');
var passwordInputElm = $('#cred_password_inputtext');
var signinButtonElm = $('#cred_sign_in_button');
it('waits for the elements present and visible (non-angular)', function() {
expect(userIdInputElm.waitReady()).toBeTruthy();
expect(passwordInputElm.waitReady()).toBeTruthy();
expect(signinButtonElm.waitReady()).toBeTruthy();
});
it('fills user and password', function() {
userIdInputElm.sendKeys(user);
passwordInputElm.sendKeys(config.pass);
});
it('clicks sign in button', function() {
signinButtonElm.click();
});
More details of why waitReady here.
Iam relatively new to angularjs and jquery mobile.I was asked to do research for my next project on these framework and so Iam trying to achieve certain functionalities.I have created a front page where an element is hidden,this page will be shown initially.Then clicking on login ,the user will be redirected to login page,where he provides username password to log in.Then he will be redirected to the same front page but i want the hidden element to be visible.Can you help me with this.My element is always hidden and I cant figure out what Iam doing wrong.The tag with hi welcome user text must be visible after log in
Here's my html front page
<div data-role="page" id="panel-responsive-page1" data-title="Panel responsive page" data-url="panel-responsive-page1">
<div role="main" class="ui-content">
/**some content **/
<div class="ui-grid-solo" ng-controller="LoginCtrl" >
<p ng-hide="userWelcome">Hi welcome User </p>
</div>
</div>
<div data-role="panel" id="nav-panel">
<ul data-role="listview">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
On clicking login,i will be redirected to login page
<div data-role="page" id="login-form">
<!-- header -->
<div data-role="header" class="backgroundColorPink">
<h1>Login Form</h1>
</div>
<!-- Form Content -->
<div role="main" class="ui-content jqm-content">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true" ng-model="userDetails.name">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true" ng-model="userDetails.password">
<div class="ui-grid-a" ng-controller="LoginCtrl">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b ">Save</div>
</div>
</form>
</div>
</div>
On clicking save,i will isssue a Ajax call and on successful login i will be redirected to the front page,and my login element must be visible.
Hers my controller
angular.module('jQMDemo', [])
function LoginCtrl($scope,$http,$window) {
$scope.userWelcome=true;
$scope.userLogin = function() {
var data={username: $scope.userDetails.name, password: $scope.userDetails.password, callfrom: "Portal"} ;
$http.post('url',data).success(function(data,status) {
alert(data.status);
if(data.status=="success"){
$window.location.href='#panel-responsive-page1';
$scope.userWelcome=false;
}
});
}
}
I might be using the controller wrong or maybe wrong usage of ng-hide..Please help,I cant figure it out
<div ng-show="element.show">
<!--codes-->
</div>
This will show if the element exists in your controller else it
will stay hidden
You can use this, so when you click on the button if everything
is good and the user is logged u create the element and then let the
class controller do the work for you
I achieved the functionality using toggleclass
I added this code in the controller:
$(".userWelcome").toggleClass("show");
And this in my HTML
<div class="ui-grid-solo hide userWelcome backgroundColorPink " >
<p class="alignMiddle ">Hi welcome {{userDetails.name}} </p>
</div>
I was able to get the desired result.If anyone else have any other way to achieve this,Please suggest