[DOM] Found 2 elements with non-unique id #: (More info:) <input type="email" name="email" id placeholder="Email Address" required> <input type="password" name="password" id placeholder="Password" required>
login:1 [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info:) <input type="password" name="password" id placeholder="Password" required>
Related
I am getting this error "Bad value number for attribute value on element input: Expected a minus sign or a digit but saw n instead" for this HTML code <label for='Card_Number'>Card Number:</label> <input type='number' id='Card_Number' name='Input_card_number' value='number' placeholder='0000-0000-0000-0000'>. Please how do i go about this?
You have an input with type=number but then you set the value to a string, here: value=number. I believe what you want to do is:
<label ...>...</label>
<input type='text' id'Card_Number' ... placeholder='0000-0000-0000-0000' />
and then think about using pattern or have type number, but then no - in your input
While I was doing some basic HTML I was wondering why Sublime Text 3 always completes required into required="" . Like my Instructor in an online course said it is not necessary to set required="true" or required="false" but when I set it to false it still requires it.
example code (it will require the field even if it is set tofalse):
<form>
<input type="password" name="password" required="false">
<button>Submit</button>
</form>
I hope you can clear up the confusion. Thanks for every answer.
Farcher
In HTML, the required attribute must be present (the field is required) or absent (the field is NOT required). When the attribute is present, it does not matter what value it has.
The required attribute is a boolean attribute. When specified, the element is required.
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
About boolean attributes:
A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
A common practice is to use the name of the attribute as its value:
<form>
<input type="password" name="password" required="required"><!-- this input is required -->
<input type="text" name="sometext"><!-- this input is NOT required -->
<button>Submit</button>
</form>
'Required' is a Boolean attribute. It assumes the value of true once it is present. therefore setting it to a 'false' still makes it act as though it was true.
Below is proof
<form>
<input type="password" name="password" required="false">
<button>Submit</button>
</form>
required doesn't take a boolean string. It's required if the attribute exists at all. Sublime is likely expecting some value like most attributes.
<form>
<input type="password" name="password" required="">
<button>Submit</button>
</form>
<form>
<input type="password" name="password" required>
<button>Submit</button>
</form>
However, if one is handling mouse events, for instance, using JS, they can set the "required" attribute to "True" or "False" using the ".prop()" method. e.g.
.prop("required", true)
OR
.prop("required", false)
I am getting the error "Bad input type email,creating a text input".Here below are the question specifications and my code. I am not getting exactly what constraints I am missing out or going wrong.
Question Description:
When creating the code for your form, you must use the HTML5 tags that are appropriate to replicate the form and fulfill all the specifications listed.
Code the form with autocomplete active.
The Name field you create should have autofocus, placeholder text, and be required. Don't forget to select the appropriate type for this field as well as all the fields that follow.
The Telephone field should have placeholder text, a pattern to restrict entry, and be required. Pattern should be of the type [ Pattern: 1-234-567-8910 ]
The Email address field should have placeholder text and allow multiple entries. This field should also be required.
The Books field should have a data list. You can select the content you would like to list.The Quantity (Maximum 5) field should have a minimum value of 1 and a maximum value of 5.
Code:
<html>
<head>
<style>
h2{
color:blue;
}
h4{
color:light blue;
font-style:italic;
}
</style>
</head>
<body>
<h2>A Simple Form</h2>
<h4>Form Fundamentals</h4>
<form method="get" action="" autocomplete="on">
<fieldset>
<legend>Customer Info</legend>
Name: <input type="text" autofocus="on" required placeholder="Enter your name"><br>
Telephone: <input type="text" pattern="[0-9]{1}[0-9]{3}[0-9]{3}[0-9]{4}" placeholder="Pattern: 1-234-567-8910" required><br>
Email address: <input type="email" placeholder="Enter your email address" multiple="multiple" required/>
</fieldset>
<fieldset>
<legend>Books</legend>
<input list="books">
<datalist id="books">
<option>abc</option>
</datalist>
Quantity(Maximum 5):<input type="number" min="1" max="5">
</fieldset>
<input type="submit">
</form>
</body>
Maybe you get the error because of the forward slash (/) after the required in input tag of Gmail.
I am generating an array based on a number that is input by the user:
<div class="form-group">
<input type="number"
class="form-control"
id="numPeople"
[(ngModel)]="numPeople"
name="numPeople"
required>
</div>
With this number, I generate an array of [['name', 'gender'],*number...]. I am then trying to use ngForm to bind directly into this array and I wanted to have a gender set as default but having trouble with it in two ways:
1) is not working so I can't have a default value in the select, and required is not forcing an entry so you can press submit without selecting an option even with the required flag set.
2) I am getting this error when I delete the placeholder text being read in from 2 way databinding into the input box, and if I try insert a blank string, i.e. by putting '' into the array on the backend: [ '', '' ]
EXCEPTION: Error in ./SellTicketComponent class SellTicketComponent -
inline template:373:28 caused by: If ngModel is used within a form
tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> ErrorHandler.handleError #
error_handler.js:54 next # application_ref.js:359 schedulerFn #
async.js:93 SafeSubscriber.__tryOrUnsub # Subscriber.js:223
SafeSubscriber.next # Subscriber.js:172 Subscriber._next #
Subscriber.js:125 Subscriber.next # Subscriber.js:89 Subject.next #
Subject.js:55 EventEmitter.emit # async.js:79 NgZone.triggerError #
ng_zone.js:331 onHandleError # ng_zone.js:292 ZoneDelegate.handleError
# zone.js:246 Zone.runTask # zone.js:154 ZoneTask.invoke # zone.js:345
error_handler.js:56 ORIGINAL EXCEPTION: If ngModel is used within a
form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
This is the code:
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<label> Enter the details of all your plus ones for the guest list: </label>
<br>
<div *ngFor="let guest of guests; let i = index;">
<label> Enter First and Last Name:</label>
<div class="form-group">
<input type="text"
class="form-control"
id="{{guest[0]}}"
[(ngModel)]="guest[0]"
name="{{guest[0]}}"
required>
</div>
<div class="form-group">
<label> Enter Gender: </label>
<select
class="form-control"
id="{{i}}"
name="{{i}}"
[(ngModel)]="guest[1]"
required>
<option value="female" selected>
female
</option>
<option value="male">
male
</option>
</select>
</div>
</div>
</form>
Not really knowing how you generate your guests and how they look like.... since you seem to use [(ngModel)]="guests[0]", I would assume you'd want to use [(ngModel)]="guests[i]" instead. Here is an example using the latter.
If you want to use two way binding for the guest, when you generate the guests, you can preset the gender value to female, so that it will be preselected in the dropdown, e.g:
this.guests.push({name:'',gender:'female'}, {name:'',gender:'female'});
If you don't need the two way binding for guests, you can use e.g [(ngModel)]="selected", where in your component you have declared selected: string = 'female'. That will work as well.
So all in all your form could look like this:¨
<button (click)="generate()">Generate 2 Guests</button> <!-- dummy button -->
<form (ngSubmit)="onSubmit(f.value)" #f="ngForm">
<label> Enter the details of all your plus ones for the guest list: </label>
<div *ngFor="let guest of guests; let i = index;">
<label> Enter First and Last Name:</label>
<div>
<input type="text" name="guest{{i}}" [(ngModel)]="guests[i].name" required>
</div>
<div>
<label> Enter Gender: </label>
<select name="gender{{i}}" [(ngModel)]="guests[i].gender" required>
<option value="female">female</option>
<option value="male">male</option>
</select>
</div>
</div>
<button type="submit">Submit</button>
</form>
This will check the validity of the fields. Here of course user can enter just white spaces, so you'd need to check that as well.
Here's a Demo Plunker (which does not check white spaces)
Hope this helps! :)
I want to validate email adresses with the required attribute. But if users enter a space at the end I gets invalid again.. See here: http://jsfiddle.net/6he4b3rb/
<input id="email" class="validate[required] wpsg_checkout " type="email" required="" placeholder="Deine E-Mailadresse" value="" name="wpsg[checkout][email]">