[RESOLVED] Problem With Form Validation - Function
Hi everybody,
I've tried just about everything I can think of on this issue so I'm passing it over to you, the experts! This is part of a university project so I wouldn't like it completing for me if it requires a lot of coding, any hints or tips are more than welcome though. If it's only a small matter then that's fine, change it at your own will.
The problem: My form has two fieldsets, each with its own submit button. I want each submit button to validate only its relative fieldset and not the other. The way I've gone about this is to use the onsubmit event handler to call a function in an external .js file. I've played around with it for a while and I can get various parts of the function working, but never all of them at the same time. The code I've posted below is how I would expect it to work, but none of it works like that, ha!
Any help on this matter would be greatly appreciated!
JavaScript Code:
Code:
valid = true;
validateMob = /^[0]{1}[7]{1}\d{9}$/;
function validateSendSpaces()
{
if (document.frmSendMessages.outputTextAreaSpaces.value === "")
{
alert("You must enter a message to be compacted before you can continue.");
valid = false;
return false;
}
if (validateMob.test(document.frmSendMessages.mobNumberSpaces))
{
alert("Please enter a valid UK mobile number.");
valid = false;
document.frmSendMessages.mobNumberSpeces.value="";
document.frmSendMessages.mobNumberSpaces.focus();
return false;
}
else
{
confirm("Your message was sent successfully." + "\n\n" + "Thank you for taking part in the O2 text campaign.");
return valid;
}
}
Form Code:
Code:
<form name="frmSendMessages" method="post" action="sendmessage.html">
<div id="firstOne">
<fieldset>
<legend align="center">Compact Spaces</legend>
<p>
The first compacting method eradicates any whitespace and then capitalises the first letter of each word.</p>
<p align="center">
<label for="inputTextAreaSpaces">Please enter the text you wish to compact:</label><br/><br/>
<textarea name="inputTextAreaSpaces" rows="8" cols="50" type="text" id="inputTextAreaSpaces" tabindex="10" ></textarea>
</p>
<p>
Once you have finished writing your text, please press the "Compact" button to see the final result.
</p>
<p align="center">
<input type="button" name="compactSpacesButton" onclick="outputTextAreaSpaces.value=compactSpaces(inputTextAreaSpaces.value)" id="compactSpacesButton" value="Compact" tabindex="20"/>
</p>
<p align="center">
<textarea name="outputTextAreaSpaces" rows="8" cols="50" type="text" id="outputTextAreaSpaces" tabindex="30" ></textarea>
</p>
<p>
If you're happy with the result, you can send your text message by simply entering the recipient’s number below and clicking the "Send" button.</p>
<p align="center">
<input type="text" name="mobNumberSpaces" id="mobNumberSpaces" class="text" tabindex="40"/>
</p>
<p align="center">
<input type="submit" name="sendTextSpaces" onsubmit="return validateSendSpaces()" id="sendTextSpaces" value="Send" tabindex="50"/>
</p>
</fieldset>
</div>
<div id="secondOne">
<fieldset>
<legend align="center">Compact Vowels</legend>
<p>
The second compacting method eradicates all but the leading vowels of each word.
</p>
<p align="center"><br/>
<label for="inputTextAreaVowels">Please enter the text you wish to compact:</label><br/><br/>
<textarea name="inputTextAreaVowels" rows="8" cols="50" type="text" id="inputTextAreaVowels" tabindex="60" ></textarea>
</p>
<p>
Once you have finished writing your text, please press the "Compact" button to see the final result.
</p>
<p align="center">
<input type="button" name="compactVowelsButton" onclick="outputTextAreaVowels.value=compactVowels(inputTextAreaVowels.value)" id="compactVowelsButton" value="Compact" tabindex="70"/>
</p>
<p align="center">
<textarea name="outputTextAreaVowels" rows="8" cols="50" type="text" id="outputTextAreaVowels" tabindex="80" ></textarea>
</p>
<p>
If you're happy with the result, you can send your text message by simply entering the recipient’s number below and clicking the "Send" button.</p>
<p align="center">
<input type="text" name="mobNumberVowels" id="mobNumberVowels" class="text" tabindex="90"/>
</p>
<p align="center">
<input type="submit" name="sendTextVowels" id="sendTextVowels" value="Send" tabindex="100"/>
</p>
</fieldset>
</div>
</form>
function validateSendSpaces(section)
{
if (document.frmSendMessages.elements['outputTextArea'+section].value === "")
{
Thanks for the reply Fang.
I've changed my code to match yours and the first part of the function is working, but still not the second. I've played around with it for a while now and still cannot figure it out.
I also have a couple of questions about the code you posted: (1) What does "section" do exactly? (2) You only wrote "outputTextArea", as opposed to "outputTextAreaSpaces", yet that bit of the function still works?
It passes the partial name of the element(s) you want to validate:[code]onsubmit="return validateSendSpaces('Spaces')"
The validateSendSpaces(section) section is the passed value Spaces
So if (document.frmSendMessages.elements['outputTextArea'+section].value === "")
would be equivalent to:
if (document.frmSendMessages.elements['outputTextAreaSpaces].value === "")
At least 98% of internet users' DNA is identical to that of chimpanzees
Ahhh I see. Something has gone wrong with the program again! Even if I change my code back to what it was originally, I'm still getting no response from it whatsoever.
validateMob = /^[0]{1}[7]{1}\d{9}$/;
valid = true;
function validateSendSpaces(section)
{
if (document.frmSendMessages.elements["outputTextArea" + section].value === "")
{
alert("You must enter a message to be compacted before you can continue.");
valid = false;
return false;
}
if (validateMob.test(document.frmSendMessages.elements["mobNumber" + section].value))
{
alert("Please enter a valid UK mobile number.");
valid = false;
document.frmSendMessages.mobNumberSpeces.value="";
document.frmSendMessages.mobNumberSpaces.focus();
return false;
}
else
{
confirm("Your message was sent successfully." + "\n\n" + "Thank you for taking part in the O2 text campaign.");
return valid;
}
}
That's better. The first and last parts of the function are now working, but it is still skipping the validateMob.test condition.
Code:
if (validateMob.test(document.frmSendMessages.elements["mobNumber" + section].value))
{
alert("Please enter a valid UK mobile number.");
valid = false;
document.frmSendMessages.elements["mobNumber" + section].value="";
document.frmSendMessages.elements["mobNumber" + section].focus();
return false;
}
[RESOLVED] Problem With Form Validation - Function
This is part of a university project so I wouldn't like it completing for me if it requires a lot of coding, any hints or tips are more than welcome though. If it's only a small matter then that's fine, change it at your own will.
Reply With Quote
Originally Posted by Fang
Bookmarks