I have written some javascript to validate a phone number field if something is entered (it is an optional field) but it doesn't seem to be working, if i enter wrong values it still submits. Here is my code:
<script>
function validatePhone()
{
var num1 = document.getElementById('workno');
if (num1 !== null)
{
regex = /\(\d{2}\)\d{8}/;
}
if (!num1.match(regex))
{
alert('That is not a correct telephone number format');
return false;
}
}
</script>
<form name="eoiform" form method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return validatePhone();">
<input type="text" id="workno" name="workno">
<input type="submit" name="submit" id="submit" value="submit">
</form>
Can anyone spot my mistake?
Your num1 variable contains an element object, not its value so can't be tested with a regexp as it stands.
It will only ever by null if the element does not exist; it will be "" if its got no value.
function validatePhone()
{
var num1 = document.getElementById('workno').value;
if (num1 !== "" && !num1.match(/\(\d{2}\)\d{8}/))
{
alert('That is not a correct telephone number format');
return false;
}
}
You also have the invalid form method="POST" in your HTML.
Maybe you should select the value from the Input. Can you try
if (!num1.value.match(regex))
In addition to the problems noted in the other answers, you should also anchor the regexp. Otherwise, it will allow extra characters outside the phone number.
function validatePhone()
{
var num1 = document.getElementById('workno').value;
if (num1 !== "" && !num1.match(/^\(\d{2}\)\d{8}$/))
{
alert('That is not a correct telephone number format');
return false;
}
}
Related
Okay so I know this is probably a headache for most of you but i'm having trouble figuring this out as javascript is not my strong suit.
I'm trying to basically get this one page to load if username and password is not blank but if it is blank I want it to alert to me (specifically window.alert()) that I have not inputted username and/or password.
I cannot seem to figure it out so here it is.
<button type="submit" id="enterButton" onclick="newPage()"><strong>Enter</strong></button>
there is my button where I put my function on
var username = getElementById("userName");
var password = getElementById("passWord");
function newPage() {
if(username.val().length==0 || password.val().length==0){
alert("please enter valid information");
return location.href = "newPage.html";
}
else{
location.href = "newPage.html";
}
}
and here is my failed attempt to initialize my idea.
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if (password==null || password==""){
alert("password can't be blank");
return false;
} else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
<html>
<body>
<body>
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
Try to check first if you can get the value of your username. If you're using plain javascript, you should use document.getElementById("userName").value.
Hello I am having trouble with my javascript validation. I am trying to validate a Phone number which I want it to display only numbers and single spaces.
My Javascript code:
<script type="text/javascript">
function validateForm()
{
var x=document.forms["checkout_details"]["phone"].value;
if (!isNaN(phone).value)//if the entered phone number is not a number
{
alert("Please enter a valid phone number");
ret = false;//return false, form is not submitted
}
}
</script>
HTML/PHP Code:
echo '<form name="checkout_details" action="confirm.php" onsubmit="return validateForm()" method="post">';
echo '<font color="red">*</font> <b>Phone Number:</b> <input type="text" name="phone" id="phone"><br /><br />';
echo '<input type="submit" value="Purchase">';
</form>
Anyone help me out tell me what i'm doing wrong. Thanks.
This is incorrect:
if (!isNaN(phone).value)//if the entered phone number is not a number
That actually evaluates to if it IS a number (double negative makes a positive). Also, ret = false; should be return false;
To remove spaces from the input before checking if it is valid, see this answer.
Try this
function validateForm()
{
var x=document.forms["checkout_details"]["phone"].value;
if (!isNaN(x))
{
alert("Please enter a valid phone number");
return false;
}
else
return true;
}
Your function needs to return true or false. A false return will prevent your form from posting.
So change this:
ret = false;//return false, form is not submitted
to:
return false;//return false, form is not submitted
Additionally, you cannot rely on isNaN to validate this field. In addition to not taking into account any phone numbers with spaces or other characters, it will not work correctly in some cases, and in this case you are negating its return value (!isNaN(x)), which means it won't work at all unless you fix that. You are better off using a regular expression to validate this field.
I have a very strange problem. Inside form I have hidden input with value -1 and input field for username.
<form action="" method="POST" name="login" onSubmit="return Validate()">
<input type="text" id="username"/>
<input type="hidden" id="available" value="-1"/>
< input type="submit" value="Send"/>
</form>
On submit function Validate() checks value of username input which mustn't be empty, and Validate() also checks value of available input which mustn't be valued -1.
function Validate(){
var a=document.getElementById("username").value;
var b=document.getElementById("available").value;
if(a=="" || a==null)
{
alert("Username cannot be empty");
return false;
}
else if(b<0)
{
alert("Form isn't finished");
return false;
}
else
{
return true;
}
}
Problem is that Validate() works only if one condition is evalueted. If function Validate() contains only 1 var(a or b) and 1 if order(without else if) it works correctly. But when I put it like this, when Validate uses a and b variables and if, else if conditional order it won't work. Really od.. Thanks in advance...
In this case it works:
function Validate(){
var a=document.getElementById("username").value;
if(a=="" || a==null)
{
alert("Username cannot be empty");
return false;
}
else
{
return true;
}
}
<input type="hidden" id="available" value="-1"/>
Here the value is of string dataType. Whereas
else if(b<0) //b is string dataType
Hence it failed. so change it as
var b= Number(document.getElementById("available").value);
Try like this
HTML:
<form action="" method="POST" name="login">
<input type="text" id="username" />
<input type="hidden" id="available" value="1" />
<input type="button" value="Send" onClick="return Validate()" />
</form>
JS:
function Validate() {
var a = document.getElementById("username").value;
var b = Number(document.getElementById("available").value);
if (a == "" || a == null) {
alert("Username cannot be empty");
return false;
} else if (b < 0) {
alert("Form isn't finished");
return false;
} else {
document.login.submit(); //dynamically submit the form
}
}
If you are wanting to get error notifications for each input don't use if/else here, use multiple if's and set your errors
function validate(){
var a=document.getElementById("username").value;
var b=document.getElementById("available").value;
var errors = [];
if(a=="" || a==null){
errors.push("Invalid username");
}
if(b<0 || isNaN(b)){
errors.push("Invalid available value");
}
if(errors.length>0) {
//do something with errors (like display them
return false;
}
}
Using the else if one of them evaluates to true it will skip the others. For instance if the first one is empty or null then it will do that block and skip the others.
I was testing your code for IE and Firefox and it work. Just add parseInt when you get the value of var b.
var b= parseInt(document.getElementById("available").value);
I need to validate Australian phone numbers (e.g. 02[3-9]\d{7} or 07[3-9]\d{7} or 04[\d]{8}) in JavaScript.
Requirements:
must be 10 digits
no commas
no dashes
no + in front
must begin with 0
At the moment I can validate required fields and email address but I want to add phone number validation.
<html>
<head>
<script type="text/javascript">
function validateForm() {
var x=document.forms["form3"]["name"].value;
if (x==null || x=="") {
alert("Name must be filled out");
return false;
}
var s=document.forms["form3"]["phone"].value;
if (s==null || s=="") {
alert("Please Enter your Phone or Mobile Number - Preferably Phone Number");
return false;
}
var s=document.forms["form3"]["email"].value;
if (s==null || s=="") {
alert("Please Enter a valid email address");
return false;
}
var k=document.forms["form3"]["email"].value;
var atpos=k.indexOf("#");
var dotpos=k.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=k.length) {
alert("Email Address is Not Valid. Please provide your correct email address.");
return false;
}
}
</script>
</head>
<body>
<form action="/thank-you.php" name="form3" method="post" onsubmit="return validateForm();" >
Your name* <input type="text" name="name" />
Phone number* <input type="text" name="phone" />
Email* <input type="text" name="email" />
<input type="submit" value="sumbit" name="submit" class="button" onclick="javascript:return validateMyForm();" /><input type="reset" value="Reset" class="resetbutton" />
</form>
</body>
</html>
Can someone help out?
Here is a regex that I would recomment
var pattern = /^0[0-8]\d{8}$/g;
So input must start with 0, and followed by a digit and it must be one between 0-8. Then it must have 8 more digit numbers.
Valid phone number examples:
0010293999 (ok)
0110293999 (ok)
0210293999 (ok)
0910293999 (nope)
//Implementation
........
var phoneNumber =document.forms["form3"]["phone"].value;
var phonePattern = /^0[0-8]\d{8}$/g;
//phone number is not valid. Please notice that you don't need to check if it's empty or null since Regex checks it for you anyways
if (!phoneNumber.test(phonePattern))
{
alert("Please Enter your Phone or Mobile Number - Preferably Phone Number");
return false;
}
..........
---- Edit
........
var phoneNumber =document.forms["form3"]["phone"].value;
var phonePattern = /^0[0-8]\d{8}$/g;
//phone number is not valid. Please notice that you don't need to check if it's empty or null since Regex checks it for you anyways
if (!phonePattern.test(phoneNumber))
{
alert("Please Enter your Phone or Mobile Number - Preferably Phone Number");
return false;
}
..........
Thanks to Paul Ferrett for this (php not js, but the regex should translate):
<?php
function validate_phone($number) {
$number = preg_replace('/[^\d]/', '', $number);
return preg_match('/^(0(2|3|4|7|8))?\d{8}$/', $number)
|| preg_match('/^1(3|8)00\d{6}$/', $number)
|| preg_match('/^13\d{4}$/', $number);
}
NB: "MIT License"
Take a look at the Javascript RegExp Object and RegExp test() method.
var patt = /04[\d]{8}/g; // Shorthand for RegExp object
var phoneNumber1 = '0412345678';
var result1 = patt.test(phoneNumber1); // result1 is true
var phoneNumber2 = 'abc';
var result2 = patt.test(phoneNumber2); // result2 is false
You can also use the required pattern.
I've never used it before but it looks like this:
<input type="text"
id="phoneNumber"
title="Phone numbers must be 10 digits and start with 0."
required pattern="0[::digit::]{10}"
/>
// It's late, no idea if that's a valid regex or if works with POSIX.
See this html5rocks article for more info:
http://www.html5rocks.com/en/tutorials/forms/html5forms/#toc-validation
Here is a more robust Australian phone regex. Courtesy of this SO question.
let phonePattern = /^(?:\+?(61))? ?(?:\((?=.*\)))?(0?[2-57-8])\)? ?(\d\d(?:[- ](?=\d{3})|(?!\d\d[- ]?\d[- ]))\d\d[- ]?\d[- ]?\d{3})$/
Testing:
0412123123 TRUE
0491579999 TRUE
0491572983 TRUE
0712122123 TRUE
0212122123 TRUE
0000000000 FALSE
5555551234 FALSE
04121231231 FALSE
041212312 FALSE
How can I check if a input field is empty in JavaScript when submitting the form?
html:
<input type="text" name="start_name" id="start_name">
Refer to http://www.w3schools.com/js/js_form_validation.asp
Have your form tag as
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Next, have a javascript function
<script>
function validateForm()
{
var x=document.forms["myForm"]["start_name"].value;
if (x==null || x=="")
{
alert("Start name must be filled out");
return false;
}
}
</script>
var start_name = document.getElementById('start_name');
if( start_name.value.length > 0 ){
// Then there is something there.
}
Try.
<script type="text/javascript">
function checkme()
{
var inputVal = document.getElementById("start_name").value;
if(inputVal == "")
{
//code
}
}
</script>
<form action="" method="post" onSubmit = "checkme();">
<input type="text" name="start_name" id="start_name">
</form>
Just checking 'if (x==null || x=="")' is not enough to validate empty text box. Go for RegEx to check empty text box.
/^\s*[0-9a-zA-Z][0-9a-zA-Z ]*$/
Ensures that at least one character is not whitespace and is of one of the allowed characters.
Use /[a-z]/i as this regex will only match if there is at least one alphabetical character.
<form action="someActionUrl" onsubmit="return validate('first_name')">
<input id="first_name" name="first_name" />
</form>
<script>
function validate(inputId){
var val = document.getElementById(inputId).value;
if(val.length>0){
// do something
return true;
}
return false;
}
</script>
try this:
var x = document.getElementById("start_name");
if(x.value== "")
{
//your restriction code comes here
}
else
{
//go ahead!
}
Note: please check for syntax if its proper.i am writing the code here directly,haven't checked it on IDE.