Log in

View Full Version : Form validation


Ashly Thompson
10-07-2011, 04:31 PM
Hi Everyone.

I want to validate three phone numbers (home number, work phone, and mobile) with regular expression and at the same time want to validate that the user has entered at least one phone number. I have created following form and code. so far they are working. Can someone please help me to build the other part.(at least one phone number should be entered.)
Thanks

my code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<script type="text/javascript" src="main_original.js"></script>

<link href="main_original.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">


function validateAllFields() {
var ishomenumberOK = false;
var isworknumberOK = false;
var ismobilenumberOK=false;

var formIsValid = true;


ishomenumberOK = ishomenumberValid();
isworknumberOK = isworknumberValid();
ismobilenumberOK =ismobilenumberValid();


if (ishomenumberOK == false) {
formIsValid = false;
showError("homenumber");
} else {
hideError("homenumber");
}

//----------------------------------------------------------------
if (isworknumberOK == false) {
formIsValid = false;
showError("workenumber");
} else {
hideError("worknumber");
}



//---------------------------------------------------------------------
if (ismobilenumberOK == false) {
formIsValid = false;
showError("mobilenumber");
} else {
hideError("mobilenumber");
}
return formIsValid;
}



//------------------------------------------------------------------

function ishomenumberValid() {
var homenumberIsValid = false;
var homenumberElement;
var pattern =/^([\(\) -]*[0-9][\(\) -]*){10}$/g;
var homenumberElement = document.getElementById("homenumber");

if (pattern.test (homenumberElement.value) ){
homenumberIsValid = true;
} else {
homenumberIsValid = false;
}

return homenumberIsValid;
}
//-----------------------------------------------------------------
function isworknumberValid() {
var worknumberIsValid = false;
var worknumberElement;
var pattern =/^([\(\) -]*[0-9][\(\) -]*){10}$/g;
var worknumberElement = document.getElementById("worknumber");

if (pattern.test (worknumberElement.value) ){
worknumberIsValid = true;
} else {
worknumberIsValid = false;
}

return worknumberIsValid;
}

//-------------------------------------------------------------
function ismobilenumberValid() {
var mobilenumberIsValid = false;
var mobilenumberElement;
var pattern =/^([\(\) -]*[0-9][\(\) -]*){10}$/g;
var mobilenumberElement = document.getElementById("mobilenumber");

if (pattern.test (mobilenumberElement.value) ){
mobilenumberIsValid = true;
} else {
mobilenumberIsValid = false;
}

return mobilenumberIsValid;
}

//----------------------------------------------------------------




function validatehomenumberField(event) {
myFocusHandler(event);

var ishomenumberlOK = false;

ishomenumberOK = ishomenumberValid();
if (ishomenumberOK == false) {
showError("homenumber");
} else {
hideError("homenumber");
}
}


//------------------------------------------------------------
function validateworknumberField(event) {
myFocusHandler(event);

var isworknumberlOK = false;
isworknumberOK = isworknumberValid();
if (isworknumberOK == false) {
showError("worknumber");
} else {
hideError("worknumber");
}
}
//---------------------------------------------------------------------
function validatemobilenumberField(event) {
myFocusHandler(event);

var ismobilenumberlOK = false;

ismobilenumberOK = ismobilenumberValid();
if (ismobilenumberOK == false) {
showError("mobilenumber");
} else {
hideError("mobilenumber");
}
}




</script>






</head>
<body>
<label>Home (include area code): <input type="text" name="homenumber" id="homenumber" onFocus="myFocusHandler(event);" onblur="validatehomenumberField(event);" size="16"/></label><br/>
<span id="homenumberhelp" class="helphide">Please enter 10 digit phone number </span>
<span id="homenumbererror" class="errorhide"> Enter Valid phone number</span>



<input type="text" name="worknumber" id="worknumber" onFocus="myFocusHandler(event);" onblur="validateworknumberField(event);" size="16"/></label><br/>
<span id="worknumberhelp" class="helphide">Please enter 10 digit phone number </span>
<span id="worknumbererror" class="errorhide"> Enter Valid phone number</span>



<input type="text" name="mobilenumber" id="mobilenumber" onFocus="myFocusHandler(event);" onblur="validatemobilenumberField(event);" size="16"/></label><br/>
<span id="mobilenumberhelp" class="helphide">Please enter 10 digit phone number </span>
<span id="mobilenumbererror" class="errorhide"> Enter Valid phone number</span>

</body>
</html>
mburt
10-07-2011, 05:04 PM
Wouldn't you do that as a final validation? Like when an <input type="button"> is pressed:


<script type="text/javascript">
var empty = function(obj) { return document.getElementById(obj).value == ""; }
function check_all() {
var error = 0;
if (empty("homenumber") && empty("worknumber") && empty("mobilenumber")) error = 1;
if (error) {
alert("You must complete at least one of these fields"); //error handling goes here
}
}
</script>
...
<input type="button" onclick="check_all(); " value="Send">
Ashly Thompson
10-08-2011, 01:56 AM
Thanks Michael,

Your solution is great, but I want it when the user leaves the fields need to show an error message. I also have relevant help message display when the user focus on that field and when the user leaves that field help disappear and error display. (All those are working) but now with your code also if user focuses on one field (Eg. first field-home phone) then that field looses focus and user focuses on second field still the error messages display.

I need this something like we need two sets of validations. 1. First check all phone fields are == 0 separately, and 2another one to check all phone field length >0 to separately, and then another validation for if both 1 & 2 are okay. Something like that.

Can you help me please.