i would like to ask how to make my phone according to this format :
+6012-1234 567
below are the code that i have done ...when i run it it say press match the request format ... so what wrong with my code ??
<div class="rTableRow">
<div class="rTableCell"><label for="Phone">Phone :</label>
</div>
<div class="rTableHead">
<input type="phone" class="form-control" id="phone" pattern="\d{3}[\-]\d{3}
[\-]\d{4}" tittle="Malaysia phone format only" placeholder="+6015-123-4567"
phone="phone">
</div>
</div>
<input type="number" /> or <input type="tel" /> you have added type="phone"
HTML5 Input Types
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
Related
I'm typing to disable/avoid the autosuggest on specific field.
The html snippet is this:
<div class="form-group">
<h4 class="whitish" for="name-of-car-id">Name of car (max length 30 chars)</h4>
<input type="input" class="form-control" placeholder="" id="name-of-car-id" autocomplete="off">
<span id='remainingC'></span>
<small class="form-text text-muted">You will identify your group of IDs by this name</small>
<div id='name-of-car-error' style='color:red; font-size: 18px;'></div>
</div>
note that I added the autocomplete='off' and yet, the browser still provide a suggestion.
Try to replace input type="input" with type="text"
I have this code that I receive from database a formated data of a social security number.
<div class="col-md-3">
<h5>Social Security #:<span class="text-danger">*</span></h5>
<div class="controls">
<div id="show-create">
<input type="number" id="social-security" name="social-security" class="form-control" value="123-45-6789">
</div>
</div>
</div>
When I check Element on Chrome, I have the value="123-45-6789", but is not showing on front end.
You have an <input type="number">, which is used only for numbers. But "123-45-6789" is not a number:
<input type="number" value="123-45-6789">
Since you're trying to display a text value, use an <input type="text"> instead:
<input type="text" value="123-45-6789">
Basically, just because text contains number characters does not mean that it is a number. Social security numbers, phone numbers, address components, etc.
HTML input with type='number' only allow numeric values such as 50, -10, or -45.3. Since your input value 123-45-6789 contains a dash in the middle, it's not a numeric value but a string. Change the input type from number to text, and it will work.
From
type="number"
To
type="text"
Full code
<div class="col-md-3">
<h5>Social Security #:<span class="text-danger">*</span></h5>
<div class="controls">
<div id="show-create">
<?php foreach ($peoples as $row) { ?>
<input type="text" id="social-security" name="social-security" class="form-control" value="<?php echo htmlspecialchars ($row['social-security'])?>">
<?php } ?>
</div>
</div>
</div>
I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>
I am working on an MVC5 Web Application , I have a simple registration form containing Email , postcode and password. But when I register the chrome remembers the postcode and password rather than email and password; and next time when I try to enter email the postcodes appear as suggestions.
My markup for the form is as under:
I have edited the question and pasted the whole form. kindly suggest me what to do other than moving email and passwords up or down.
<div class="wrapper">
<div class="closeBetaWrapp">
<div class="simplePopup">
<div class="loginWrapp signupWrapp">
<div class="iconCont"><img src="images/orchaIcon.png" alt="Orcha"></div>
<form action="">
<div class="formrow ">
<div class="leftCol">
<label for="Email">Email</label>
<input class="formField" type="email" name="Email" id="Email" placeholder="Enter your email address here" />
</div>
<div class="leftCol">
<label for="Pcode">Postcode</label>
<input class="formField" type="tel" name="Pcode" id="Pcode" placeholder="Enter postcode here" />
</div>
<div class="leftCol">
<label>Year of Birth</label>
<select id="" class="dropdown">
<option>Choose your year of birth</option>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
</div>
<div class="leftCol">
<label>Gender</label>
<select id="" class="dropdown">
<option>Choose your year of birth</option>
<option>Female</option>
<option>Male</option>
</select>
</div>
<div class="leftCol">
<label for="Password">Password</label>
<input class="formField" type="password" name="Password" id="Password" placeholder="Enter your password here" />
</div>
<div class="rightCol">
<label for="CPassword">Confirm Password</label>
<input class="formField" type="password" name="CPassword" id="CPassword" placeholder="Enter password again" />
</div>
</div><!-- formrow -->
<div class="formrow">
<div class="rightCol btnCol">
<input class="moreBtn" type="submit" value="Signup" />
<input class="moreBtn cnclBtn" type="reset" value="Cancel" />
</div>
</div><!-- formrow -->
</form>
</div>
</div>
</div><!-- closeBetaWrapp -->
Browsers detect passwords by form.elements[n].type == "password" and iterating through all the document. Then it detects the username field by searching backwards through form elements for the text field immediately before the password field.
So, In your case, It thinks your postcode as your username field and remembers this.
So, solution is to move the postcode field above the email field.
If even after moving, it doesn't work, delete previously saved postcode-password value from 'saved passwords' in chrome settings. Also delete any previously saved values by using down arrow key to select the suggestion and pressing shift + delete.
I got the information about how browsers detect username-password field here & here
You can use the autocomplete attribute to tell the browser what the field contains. For example:
<input class="formField" autocomplete="postal-code" type="text" name="PostCode" id="PostCode" placeholder="Enter your postcode here" />
See https://html.spec.whatwg.org/multipage/forms.html#autofill for more information.
I have a simple form with a date validation which works fine:
The problem is that when the validation kicks in, the "End Date" label gets misplaced as you can see (is above the date field box/calendar):
The code related is the following (it's just a form):
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Is there any way to "pack" the form or any way to stop this happening?
Any hint please?
Thanks everyone