www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] Problem With Form Validation - Function

  1. #1
    Join Date
    Nov 2008
    Location
    Unknown
    Posts
    59

    resolved [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>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Does this give you a clue:
    Code:
    function validateSendSpaces(section)
    {
    		if (document.frmSendMessages.elements['outputTextArea'+section].value === "")
    		{
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Nov 2008
    Location
    Unknown
    Posts
    59
    Quote Originally Posted by Fang View Post
    Does this give you a clue:
    Code:
    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?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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

  5. #5
    Join Date
    Nov 2008
    Location
    Unknown
    Posts
    59
    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.

    Here's what I've got:

    The call:
    Code:
    <input type="submit" name="sendTextSpaces" onsubmit="return validateSendSpaces('Spaces')" id="sendTextSpaces" value="Send" tabindex="50"/>
    The JavaScript:
    Code:
    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;
    		}
    }

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change all references:
    Code:
    				document.frmSendMessages.elements["mobNumber" + section].value="";
    				document.frmSendMessages.elements["mobNumber" + section].focus();
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Nov 2008
    Location
    Unknown
    Posts
    59
    Still not working. Hmm... Any ideas?

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <input type="submit" name="sendTextSpaces" onclick="return validateSendSpaces('Spaces')" id="sendTextSpaces" value="Send" tabindex="50"/>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Nov 2008
    Location
    Unknown
    Posts
    59
    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;
    		}

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    not true
    Code:
    if (!validateMob.test(document.frmSendMessages.elements["mobNumber" + section].value))
    At least 98% of internet users' DNA is identical to that of chimpanzees

  11. #11
    Join Date
    Nov 2008
    Location
    Unknown
    Posts
    59
    Quote Originally Posted by Fang View Post
    not true
    Code:
    if (!validateMob.test(document.frmSendMessages.elements["mobNumber" + section].value))
    I really need to start paying attention to detail. Working perfectly now. Thanks for all the help Fang, appreciate it m8!

    Regards,

    Amph.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles