Below is the tag for a password field in Login form.
Our guys used the same class name for EMail field also. Hence I cannot use className for password to locate it in protractor, since xpath and css(id design changes) are not reliable, what is the best option for me?
Tag for Email field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="" required="" type="email">
Tag for password field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-5-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-5" placeholder="" required="" type="password">
For submit button:
<ion-button _ngcontent-rbh-c129="" type="submit" color="loginbutton ion-margin" class="ion-color ion-color-loginbutton ion-margin md button button-solid ion-activatable ion-focusable hydrated">Login</ion-button>
I don’t suggest you to go with ion-input properties since it’s Ionic related properties generated during the build process and it can be dynamic.
Use type instead since it is:
Obvious
Static
input[type="email"]
And
input[type="password"]
After some time you will have hard time understanding your own code and trying to recall what ion-input-0
refers to.
By css:
element(By.css('input[name="ion-input-0"][type="email"]')),
and:
element(By.css('input[name="ion-input-5"][type="password"]')),
Related
I want to store my data in a database using forms.
How can I do it without using SQLFORM
like in php we use $var = $_POST['var_form']
I created a table in modul file called Produit
db.define_table('Produit',`enter code here`
Field('Nom', requires = IS_NOT_EMPTY()),
Field('Poid', 'float', requires = IS_NOT_EMPTY()),
Field('Prix', 'float', requires = IS_NOT_EMPTY()),
Field('Expiration', 'datetime'),
auth.signature)
And created a form like
{{extend 'layout.html'}}
<form action="create" method=post>
<fieldset>
<legend><h1><center><em>Ajouter un produit</em></center></h1></legend>
Nom:<br>
<input type="text" name="nom" required/>
<br>
Poid:<br>
<input type="text" name="poid" required/>
<br>
Prix:<br>
<input type="text" name="prix" required/>
<br>
Date d'expiration:<br>
<input type="date" name="exp" required/>
<br>
<br><br>
<input type="submit" value="Ajouter">
Use URL helper to specify action of the form.
<form action="{{=URL('create')}}" method=post>
...
</form>
Then in create controller, you can access submitted values using request.vars
db.Produit.insert(Nom=request.vars.nom, Poid=request.vars.poid,
Prix=request.vars.prix, Expiration=request.vars.exp)
This answer has the right idea, but to make things a little easier, you should use HTML field names that exactly match the database table field names. In that case, you can simplify the insert to:
db.Produit.insert(**db.Produit._filter_fields(request.post_vars))
Beware, though, that your manual approach lacks any protection against CSRF attacks (which the web2py form system would provide). As an alternative, note that you can still use SQLFORM even if you want to generate a custom form layout in the view. This approach is covered in the documentation here and here.
I have a form in Angular 2 with a simple validation using Validators.
The html template
<form role="form" #myForm="ngForm" (ngSubmit)="submit()" novalidate [ngFormModel]="form">
<div class="form-group list-element">
<label for="name">name*</label>
<input type="text" name="name" class="form-control" ngControl="name"
#name="ngForm" placeholder="Enter name" [(ngModel)]=user.name >
</div>
</form>
The ControlGroup for the validation
ngOnInit() {
this.form = new ControlGroup({
name: new Control('', Validators.compose([
Validators.required,
Validators.pattern("(([a-zA-Z ]|[0-9])+)*"),
Validators.minLength(5),
Validators.maxLength(80)
]))
});
}
When I type fast (random) characters in the input field (e.g #1KZBZKBjkndedjk###kjbzdzdékj!) the application crashes. This does not happen always so I have not really noticed a pattern.
This is the place where the crash happens, so I think the crash has something to do with the pattern.
That's a known issue https://github.com/angular/angular/issues/7822 and will probably be fixed when this pull request lands https://github.com/angular/angular/pull/7421
First of all this is not related to AngularJS.
This happens because your pattern is wrong I don't know what pattern you need but for example if you need to validate email then use this pattern
& Just Check for your pattern nothing else.
your code....
Validators.pattern("^[_a-z0-9]+(.[_a-z0-9]+)#[a-z0-9-]+(.[a-z0-9-]+)(.[a-z]{2,4})$"),
your code ends...
That it!
With Bootstrap 3, form input element size does not change as specified by size attribute, code snippet:
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" size="50">
I understand that there are workarounds to shorten the length of an input element but, help me understand why doesn't it work with size attribute of input element?
Working code at bootply.
Thanks!
There are a couple things you could do. You could use Bootstrap's col-* classes to change how your form lays out, or you can either modify the CSS or add inline styles to your inputs (such as <input ... style="width:200px;">).
I would personally try to use the col-* classes for consistency, even though it adds a bit more markup to your pages. As an example, something like this:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1" class="col-sm-4">Email address</label>
<div class="col-sm-8">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" size="50" type="email">
</div>
</div>
...
I'd also try to follow the documentation and examples from the Bootstrap docs.
if you are using bootstrap 3 try placing your inputs in a div
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>
If you're using Visual Studio then you might want to remove Microsoft's defaults in the Site.css which contains:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Building a CMS with node, mongoDB & angularjs. I have an edit form with inputs that I want to bind to the $scope so their values are populated with existing data. Ex:
<form ng-submit="editArticle(article._id, article)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="article.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
This appropriately fills in the input values with the current data from my mongo database. However, I would like to bind to a new form scope, so it doesn't try to pass in every value in the article scope, just the new scope within the form. (Article scope currently consists of every field in the article document in Mongo. If I pass all of this data in, I get an error about invalid schema because it is trying to pass in the __v field as well.)
So ideally I want to do this:
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="form.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="form.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
So on submit, it only passes form.hed and form.dek to my database. However, now these input fields are blank because they're not bound to the original article data. The user would have to re-fill in each of the fields with the original values. Is there a way to bind to multiple models orrrr bind to a current model, but on submit only send the updated form data?
EDIT:
It looks like I have to add the ng-change attribute to each field, to populate the input fields with the original scope, then on change, set the form scope equal to the changed value. Eg.
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-change(form.article = article.hed) ng-model="article.hed" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-change(form.dek = article.dek) ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
Not sure how thrilled I am about this solution, but it works. If anyone knows a more efficient way to accomplish this please let me know!
Do a copy of the original object (or part of it) upon receiving it from DB and bind your from to it.
Coping objects before edit is a very good pattern since it allows you to easily provide additional functionality like revert edits and disable save buttons if no edit was made.
We have the following code in which we are getting errors in the w3c validator for "Any input descendant of a label element with a for attribute must have an ID value that matches that for attribute." and "The label element may contain at most one input, button, select, textarea, or keygen descendant." Is this something that should just be ignored by the validator (as it is seeminlgly correct) or should it be changed to appease the w3c? Note this is html5 doctype.
<fieldset>
<label for="user_is_subscribed">
<input type="hidden" value="0" name="user[is_subscribed]">
<input type="checkbox" value="1" name="user[is_subscribed]" id="user_is_subscribed">
Newsletter Signup
</label>
<span class="checkLabel">We will never spam or give away your information</span>
</fieldset>
Thank in advance!
Labels should contain at most one input element. Move the hidden input out of the label. Also, when an input is a descendant of a label, the for attribute is superfluous.
<fieldset>
<input type="hidden" value="0" name="user[is_subscribed]">
<label>
<input type="checkbox" value="1" name="user[is_subscribed]" id="user_is_subscribed">
Newsletter Signup
</label>
<span class="checkLabel">We will never spam or give away your information</span>
</fieldset>
Is this something that should just be ignored by the validator
No
(as it is seeminlgly correct)
It isn't
or should it be changed
Yes
to appease the w3c?
No. It should be changed because it is wrong, and browsers have to error correct to figure out which element the label is associated with.
The label isn't labeling the hidden input, move it elsewhere.