I'm stuck on one small part of my form - I'd like to make it so just the first character of the street address field is numeric, the rest can be anything. I have fiddled with using indexOf as well as reg ex.. I get close, but not quite.
Any suggestions would be appreciated!
window.onload=function()
{
document.forms[0].onsubmit=function()
{
for(i = 0; i < this.elements.length; i++)
{
//alert required field
if(this.elements[i].className.indexOf("required") != -1)
{
if(this.elements[i].value == "")
{
alert("required field");
this.elements[i].focus();
return false;
}
}
//username requirements
var userLength = document.getElementById("user")
if((userLength.value.length < 5) || (userLength.value.length > 10))
{
alert("username must be between 5-10 characters");
return false;
}
//email address requirements
var emailMust = document.getElementById("email")
if((emailMust.value.indexOf("@") == -1) || (emailMust.value.indexOf(".") == -1))
{
alert("email must contain proper characters");
return false;
}
//address requirements
var address = document.getElementById("address")
var regex = new RegExp('/^[0-9]{1}[a-zA-Z0-9]$/');
if(address.match(regex))
{
alert("address must begin with a number");
return false;
}
//birth year requirements
var birthYear = document.getElementById("birth")
if(isNaN(birthYear.value))
{
alert("birth year must be a number");
return false;
}
}
}
}
here`s my html portion:
<form action="#">
<p><label for="user">Username:</label>*</p>
<p><input type="text" class="required" id="user"></p>
<p><label for="email">Email Address:</label>*</p>
<p><input type="text" class="required" id="email"></p>
<p><label for="address">Street Address:</label></p>
<p><input type="text" id="address"></p>
<p><label for="birth">Year of birth:</label>*</p>
<p><input type="text" class="required" id="birth"></p>
<br>
<input type="submit">
<p><i>* required field</i></p>
I'm stuck on one small part of my form - I'd like to make it so just the first character of the street address field is numeric, the rest can be anything. I have fiddled with using indexOf as well as reg ex.. I get close, but not quite.
Any suggestions would be appreciated!
window.onload=function()
{
document.forms[0].onsubmit=function()
{
for(i = 0; i < this.elements.length; i++)
{
//alert required field
if(this.elements[i].className.indexOf("required") != -1)
{
if(this.elements[i].value == "")
{
alert("required field");
this.elements[i].focus();
return false;
}
}
//username requirements
var userLength = document.getElementById("user")
if((userLength.value.length < 5) || (userLength.value.length > 10))
{
alert("username must be between 5-10 characters");
return false;
}
//email address requirements
var emailMust = document.getElementById("email")
if((emailMust.value.indexOf("@") == -1) || (emailMust.value.indexOf(".") == -1))
{
alert("email must contain proper characters");
return false;
}
//address requirements
var address = document.getElementById("address")
var regex = new RegExp('/^[0-9]{1}[a-zA-Z0-9]$/');
if(address.match(regex))
{
alert("address must begin with a number");
return false;
}
//birth year requirements
var birthYear = document.getElementById("birth")
if(isNaN(birthYear.value))
{
alert("birth year must be a number");
return false;
}
}
}
}
here`s my html portion:
<form action="#">
<p><label for="user">Username:</label>*</p>
<p><input type="text" class="required" id="user"></p>
<p><label for="email">Email Address:</label>*</p>
<p><input type="text" class="required" id="email"></p>
<p><label for="address">Street Address:</label></p>
<p><input type="text" id="address"></p>
<p><label for="birth">Year of birth:</label>*</p>
<p><input type="text" class="required" id="birth"></p>
<br>
<input type="submit">
<p><i>* required field</i></p>
3 Answers
Reset to default 4Change the following line
var regex = new RegExp('/^[0-9]{1}[a-zA-Z0-9]$/');
to
var regex = new RegExp('^[0-9]');
Since your requirement is that just the first character of the street address field is numeric, the rest can be anything, your regular expression should concern itself with the first character only. If you must specify another character class, it shouldn’t be as narrow as [a-zA-Z0-9]. Remember that a valid address may contain characters like ma, hyphen, space and so on.
You can also use:
var regex = new RegExp('/^[0-9]{1,}[a-zA-Z0-9]*$/');
Here's how {} works:
a{3} Exactly 3 of a
a{3,} 3 or more of a
a{3,6} Between 3 and 6 of a
I'd also point out that your pattern isn't accounting for spaces that e after the number. For example, it would not match 123 Rod Street. I'd also include a space in your set (right before the letter a)
For example:
new RegExp('/^[0-9]{1,}[ a-zA-Z0-9]*$/');
Update::
I'd leave off the forward slashes because since you're passing it as a string it will get escaped automatically!!
new RegExp('^[0-9]{1,}[ a-zA-Z0-9]*$');
You could try converting the first char into it's ordinal value and paring it to the range of ASCII number literals.
var addressValid = address.value.charCodeAt(0);
addressValid = (addressValid >= 48 && addressValid <= 57)
The value addressValid will be true if the first char is a number (0-9). All simple and without regular expression.
Of course you could do all this by directly accessing address.value.charCodeAt(0) in an if but this is for demonstration purpose, therefore more verbose.