I have the following regex pattern that I'm using to validate against email addresses in JavaScript which currently works.
const match = (email) => /^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1#(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/i.test(email);
console.log(match('email#email.com'))
console.log(match('.22#email.com'))
console.log(match('#.com'))
I've been attempting to use the HTML pattern prop to validate against this pattern, but I can't seem to get it to work correctly.
I've tried the same pattern but I can't seem to get it to work. I've also tried unescaping the regex pattern too.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" pattern='/^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1#(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/'>
<input type="submit">
</form>
Currently any email address results in an incorrect pattern match. Do I need to format the regex pattern differently to support this?
First, you must use type="text". Else, the email validation will be done with the built-in regex. Second, pattern='/^...$/' must be "converted" to pattern='...' as there is no need for slashes on both ends and no need for anchors, the pattern is anchored by default.
Use
<input type="text" id="email" name="email" pattern='("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1#(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>
If you need to make it case insensitive, add a-z to the character classes bearing in mind that [A-Za-z0-9_] = \w:
<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1#(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>
JS demo:
input:valid {
color: black;
}
input:invalid {
color: red;
}
<form>
<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1#(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))' title="Please enter the right email address." />
<input type="Submit" />
</form>
I have an HTML form. I would like to show that some of the fields are required by making them bold. In principle, should this go into the CSS rather than HTML? How would you do it?
<form action="doit" id="doit" method="post">
<label>
Name
<input id="name" name="name" type="text" />
</label>
<label>
Phone number
<input id="phone" name="phone" type="text" />
</label>
<label>
Year
<input id="year" name="year" type="text" />
</label>
</form>
Just of the top of my head, I think that if you're willing to use HTML5 and use the <input type="text" name="year" required> property, that you should be able to do:
input:required{
font-weight:bold;
}
And of course, you could go wild here and start throwing around borders and all sorts of stuff to make it really stand out.
Singularity's answer is perfectly valid. For the sake of completion, if you're not willing to use HTML5's required attribute, I would recommend adding a class by the same name to the inputs that are required.
<input type="text" name="firstname" class="required">
input.required {
font-weight: bold;
}
You can further use that class as a selector in your Javascript where you enforce the rule.
$(form).submit(function() {
$('input.required').each(function() {
if ($(this).val() === '') return false;
});
});
To answer the other question you were asking: the bold directive should go in CSS since it is purely presentational.
<form id="form">
Name: <input type="text" name="name"/></br>
Status Message: <input type="text" name="statusmessage"/><br/>
</form>
So, do I assign an id="name" within the brackets? And then in CSS, do I call it with #form name?
html:
<input type="text" name="name" id="id" class="class" />
css: (any of the following would style the element)
input [name=name]{}
#id{}
.class{}
or you could style all text input fields in the form with:
#form input[type=text]{}
If you are using CSS2 you can use <input type="text" name="name" id="name" /> and then write this CSS:
#name {
:
}
It will select the element with ID name. Remember that using additional address info is unnecessary since the ID is uniquely sufficient to select any single element.
I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
With a bit of JavaScript:
<input
value="Enter username..."
onfocus="if (this.value === 'Enter username...') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder:
<input placeholder="Enter username.." ... />
but this attribute is not supported in old browsers.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>
You'd need attach an onFocus event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
I think for your situation, the easy and simple for your html input , you can
probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
With HTML5, you can now use the placeholder attribute like this:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_placeholder.asp
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
This is exactly what you want
$(document).tooltip({ selector: "[title]",
placement: "top",
trigger: "focus",
animation: false});
<form id="form">
<label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
<input id="myinput1" type="text" title="This tooltip persists" />
<input id="myinput2" type="text" title="This one also" />
</form>
[ref]
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
If you don't insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:
<form action="input_password.htm">
<label for="username" title="This is your user name...">Username: </label><input id="username" name="Username" type="text" size="20" maxlength="20"></p>
</form>
If you click the label, the input field will get the input focus.
If you hover over the label, it will show a longer explanation.
Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).
Define tooltip text
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
How do i create a html textbox which looks that it can accepts only 2 characters .
<input type="text" maxlength="2" size="1"/>
what style do i need to apply so that textbox can be shown in such way it can accept 2 characters style ="???"
A simple width would do:
<input type="text" maxlength="2" size="1" class="twochar"/>
And the css:
.twochar
{
width:2em;
}
http://jsfiddle.net/kjl_42/vstMC/